Question

我正在尝试配置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

Answer 1

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

我创建了一个问题：

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

以及修复它的拉取请求

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

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

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

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

Answer 4

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

改变自：

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

为：

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

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

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

4 个答案: