如何让 ngtemplate-loader 与 Webpack 3、Angular 1、TypeScript 和 ES 6 模块一起工作？答案

【问题标题】：How to get ngtemplate-loader working with Webpack 3, Angular 1, TypeScript and ES 6 modules?如何让 ngtemplate-loader 与 Webpack 3、Angular 1、TypeScript 和 ES 6 模块一起工作？
【发布时间】：2017-12-06 22:53:42
【问题描述】：

我正在尝试将 ngtemplate-loader 配置为能够在 TypeScript 文件中使用我的角度模板，如下所示：

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',
                }
            ],
        },

（奇怪的 *.ththml 后缀就是这样，没有标准的 html-loader 可以干扰。）

但是模板永远不会被加载（导入后未定义）。

我尝试添加

options: {
    exportAsEs6Default: true
}

到链接的 html-loader，但这也没有成功。

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

【问题讨论】：

标签： angularjs webpack-2

【解决方案1】：

经过几个小时的搜索。这就是为我解决的问题：

更改自：

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

到：

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

如果有人也坚持这一点，添加“* as”可以解决所有问题。

【讨论】：

【解决方案2】：

使其工作的一种方法是使用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 = _;
}

【讨论】：

【解决方案3】：

我让它在这个设置下工作：

{
  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",

【讨论】：

要添加到这个答案，我必须将 options: { esModule: false} 添加到 raw-loader 以使其运行。

【解决方案4】：

看起来这是 ngtemplate-loader 中的一个错误/缺失功能。

我创建了一个问题：

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

以及修复它的拉取请求

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

希望它尽快被接受。现在我可以将我的 package.json 指向我的 fork 中包含修复的提交。

【讨论】：

为什么卡住了？