如何让ngtemplate-loader使用Webpack 3，Angular 1，TypeScript和ES 6模块？

Question

我想配置ngtemplate装载机能够用我的角模板的打字稿文件像这样：在webpack.config

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

装载机的定义：

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

（奇怪*。 Ththml后缀就是这样，没有标准的html加载器可以干涉）。

然而，模板永远不会被加载（导入后未定义）。

我试图

options: { 
    exportAsEs6Default: true 
} 

添加到链接的HTML加载器，但没有工作了。

完整的示例项目：https://github.com/eekboom/ng-webpack

Answer 1

看起来它是在ngtemplate装载机的错误/丢失功能。

我创建了一个问题：

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

，并修复它

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

希望它就会很快接受pull请求。现在我可以将我的package.json指向包含我的fork中修复的提交。

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 = _; 
}