How to get ngtemplate-loader working with Webpack 3, Angular 1, TypeScript and ES 6 modules?

问题

I am trying configure ngtemplate-loader to be able to use my angular template in a TypeScript file like so:

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

Loader definition in webpack.config:

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

(The strange *.ththml suffix is just so, that no standard html-loader can interfere.)

However the template never gets loaded (is undefined after import).

I tried to add

options: {
    exportAsEs6Default: true
}

to the chained html-loader, but that did not work out, too.

Full example project: https://github.com/eekboom/ng-webpack

回答1:

Looks like it is a bug/missing feature in ngtemplate-loader.

I created an issue:

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

and a pull request that fixes it

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

Hope it gets accepted soon. For now I can point my package.json to the commit containing the fix in my fork.

回答2:

One way to make it work is to use import * as templateUrl from './../..';:

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

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

import.d.ts definition:

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

回答3:

I made it work with this settings:

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

The packages versions:

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

回答4:

After searching for hours. this is what solved for me:

changing from:

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

to:

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

adding the "* as" solved everything if someone stuck with this too.

来源：https://stackoverflow.com/questions/44889493/how-to-get-ngtemplate-loader-working-with-webpack-3-angular-1-typescript-and-e

标签

angularjs

webpack-2