AngularJS + Webpack2でテンプレートを含める最も良い方法は何ですか？

Question

編集：requireの代わりにimportステートメントを使用してテンプレートをインポートする方法が見つかりませんでしたが、設定を簡略化できることがわかりました。

webpackの設定では、/\.html$/の代わりにngtemplate-loaderの代わりにhtml-loaderを使用してください。コンポーネントでは、オリジナルの投稿のように、ファイルの先頭にテンプレートを入力します（）。ただし、コンポーネント定義の "templateUrl"を "template"に変更してください。ウェブパックで残りの作業が行われます。

const template = require('./component.html'); 

class Example(){ 
    ...  
} 

export const component = { 
    bindings: {}, 
    controller: Example, 
    template: template 
}; 

---

オリジナルのポスト：

私はngtemplate-loaderで実用的なソリューションがあります。

const template = require('./component.html'); 
import ExampleService from './example.service'; 

class Example() { 
    constructor(private exampleService: ExampleService) { 

    } 
    ... 
} 

export const component = { 
    bindings: {}, 
    controller: Example, 
    templateUrl: template 
}; 

をしかし、私は私の同僚がrequire構文に反対するだろう怖いです。あなたは、私はグランツからWebpack2に私たちのアプリを移行している、そして現在のアプリはimport foo from './bar'構文を使用していることがわかります。

また、現在のビルドのjavascriptファイルのテンプレートもインポートしません。 templateUrlでコールバックを使用して文字列を返します。

import ExampleService from './example.service'; 

class Example() { 
    constructor(private exampleService: ExampleService) { 

    } 
    ... 
} 

export const component = { 
    bindings: {}, 
    controller: Example, 
    templateUrl: ['constantsFactory', function(constantsFactory) { 
     return `${constantsFactory.path}/component.html`; 
    }] 
}; 

requireなし$ templateCacheを取り込むことができWebPACKのローダはありますか？

もしそうでなければ、import構文でTypescriptでテンプレートをインポートする方法はありますか？

Answer 1

import構文を使用して$ templateCacheにテンプレートを追加する方法はありませんが、 'require'構文を使用してキャッシュにテンプレートを追加できます。私は今見つけることができる

angular1-templateurl-loader

ベストローダー。