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'
        })

    ]


}

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

错误：模板解析错误：无法绑定到“routerlink”，因为它 不是“a”的已知属性。 ("r>菜单][routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}} "): t@0:359 不能绑定到 'routerlinkactive' 因为它不是 'a' 的已知属性。 (""item ui red" *ngfor="let r of routes"> ][routerlinkactive]="['active']">{{r.text}} Menu ]*ngfor="let r of routes"> 主菜单 [ERROR ->] ]*ngif=bolWidthLess1000>

[错误->] ][routerlink]=r.routerLink> ][routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}} ][routerlinkactive]="['active']">{{r.text}} "): t@0:674 无法绑定 'ngforOf' 因为它不是 'a' 的已知属性。 ("/div>

]*ngfor="let r of routes" class="item mainmenu" [routerlink]=r.routerLink> "): t@0:540 属性绑定 ngforOf 未被任何指令使用 在嵌入式模板上。确保属性名称是拼写的 正确，所有指令都列在“指令”部分。 ("> [错误 ->] {{r.text}} ]*ngif=!bolWidthLess1000> "): t@0:512 属性绑定 ngif 嵌入式模板上的任何指令均未使用。确保 属性名称拼写正确，所有指令都列在 “指令”部分。 ("routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}} [错误->]

Answer 1

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

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

或者

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

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