angular - webpack html-loaders 小写 Angular 2 内置指令

Question

我正在使用 html-loader 加载我的 html 模板，并使用 file-loader 加载模板中的图像。这在 dev 中运行得很好，但是当我运行 build:prod 并运行输出时，我得到一个模板解析错误。

似乎所有 angular2 内置指令(例如，*ngFor、*ngIf)都被转换为所有小写(例如，*ngfor、*ngif)，这导致了错误。

我尝试创建一个单独的项目，这次没有使用 Angular 2 的任何内置指令，一切正常。

我可以使用其他加载器吗？我如何正确加载这些模板以及这些模板使用的图像？

这是我的 webpack.config

var webpack = require('webpack');
var HtmlWebPackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
    entry:'./src/main.ts',

    output:{
        path:'./dist',
        filename:'app.bundle.js'
    },
    module:{
        loaders:[{test:/\.ts$/, loader:'ts-loader'},
        { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
      { test: /\.html$/, loader: 'html-loader' },
      {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader"},
      //{ test: /\.html$/, loader: 'raw-loader' },
      //{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
      ]

    /*   loaders: [
      // .ts files for TypeScript
      { test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] },
      { test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
      { test: /\.html$/, loader: 'raw-loader' }
    ]*/
    },
    resolve:{
        root: [ path.join(__dirname, 'src') ], //add this for dev server
        extensions:['','.js','.ts']
    },
    plugins:[

        //inject all the files above into this file
        new HtmlWebPackPlugin({
            template: './src/index.html'
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
                $: 'jquery',
                jquery: 'jquery'
        })

    ]


}

下面是我得到的解析错误。

Error: Template parse errors: Can't bind to 'routerlink' since it isn't a known property of 'a'. ("r> Menu ][routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}} "): t@0:359 Can't bind to 'routerlinkactive' since it isn't a known property of 'a'. (""item ui red" *ngfor="let r of routes"> ][routerlinkactive]="['active']">{{r.text}} Home Menu ]*ngfor="let r of routes"> Home Menu [ERROR ->] ]*ngif=bolWidthLess1000>

[ERROR ->] ][routerlink]=r.routerLink> ][routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}} ][routerlinkactive]="['active']">{{r.text}} "): t@0:674 Can't bind to 'ngforOf' since it isn't a known property of 'a'. ("/div>

]*ngfor="let r of routes" class="item mainmenu" [routerlink]=r.routerLink> "): t@0:540 Property binding ngforOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("> [ERROR ->] {{r.text}} ]*ngif=!bolWidthLess1000> "): t@0:512 Property binding ngif not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}} [ERROR ->]

Answer 1

在加载程序查询中将最小化参数设置为 false，如下所示。

{ test:/\.html$/, loader: 'html?minimize=false' }

或者

您可以将 html-loader 升级到 0.4.3 并使用以下配置。

{ test:/\.html$/, loader: 'html?minimize=true&caseSensitive: true}