Webpack 3、Angular 1、TypeScript、ES 6モジュールでngtemplate-loaderを使用するには？

Question

私はそうのようなtypescriptファイルに私の角度テンプレートを使用できるようにngtemplate-ローダーを設定しようとしています：

import myTemplateUrl from './hello-angular2-template.thtml'; 
angular 
    .module('pd') 
    .component('helloAngular2', { 
     templateUrl: myTemplateUrl, 
    }); 

webpack.configでローダーの定義：

module: { 
    rules: [ 
     // Angular Template HTML 
     { 
      test: /\.thtml$/, 
      use: [ 
       { 
        loader: 'ngtemplate-loader', 
       }, 
       { 
        loader: 'html-loader', 
       } 
      ], 
     }, 

（奇妙*。標準のHTMLローダが干渉することはありません）

しかし、テンプレートはロードされません（インポート後は定義されません）。

私は連鎖のhtml-ローダーに

options: { 
    exportAsEs6Default: true 
} 

を追加しようとしましたが、それはあまりにも、うまくいきませんでした。

全サンプルプロジェクト：それはngtemplateローダーのバグ/欠けている機能があるようhttps://github.com/eekboom/ng-webpack

Answer 1

が見えます。

私は問題を作成しました：

https://github.com/WearyMonkey/ngtemplate-loader/issues/63

し、それを

https://github.com/WearyMonkey/ngtemplate-loader/pull/64

を修正プル要求は、それがすぐに受け入れられます願っています。今のところ私はpackage.jsonに自分のフォークの修正を含むコミットを指し示すことができます。

Answer 2

私はそれがこの設定で働かせた：

{ 
    test: /\.html$/, 
    use: [ 
    { 
     loader: 'ngtemplate-loader', 
     options: { 
     angular: true, 
     }, 
    }, 
    { 
     loader: 'raw-loader', 
    }, 
    ], 
}; 

パッケージのバージョン：

"webpack": "^3.5.0", 
"angular": "^1.6.5", 
"ngtemplate-loader": "^2.0.1", 
"raw-loader": "^0.5.1", 

Answer 3

それを動作させるための一つの方法はimport * as templateUrl from './../..';を使用することです：

import * as myTemplateUrl from './hello-angular2-template.thtml'; 

angular 
    .module('pd') 
    .component('helloAngular2', { 
     templateUrl: myTemplateUrl, 
    }); 

import.d.ts定義：

declare module '*.thtml' { 
    var _: string; 
    export = _; 
}