Question

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

似乎所有angular2内置指令（例如，* ngFor，* ngIf）都被转换为全部小写（例如，* ngfor，* ngif），这会导致错误。

我尝试创建一个单独的项目，这一次，不使用角度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'
        })

    ]


}

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

错误：模板解析错误：无法绑定到＆＃rou; routerlink＆＃39;既然如此   不是“a”的已知财产。（＆＃34; r＆gt;菜单] [routerlink] = r.routerLink   [routerlinkactive] =＆＃34; [＆＃39;有源＆＃39;]＆＃34;＆GT; {{r.text}}    ＆＃34;）：t @ 0：359无法绑定到＆＃rou; routerlinkactive＆＃39;因为它不是一个   'a＆＃39;的已知财产。（＆＃34;＆＃34;项目ui red＆＃34; * ngfor =＆＃34;让r路由＆＃34;＆gt;] [routerlinkactive] =＆＃34; [＆＃39;有效＆＃39;] ＆＃34;＆gt; {{r.text}}主页     菜单] * ngfor =＆＃34;设r路由＆＃34;＆gt;主菜单[错误 - ＆gt;]] * ngif = bolWidthLess1000＆gt;
       [错误 - ＆gt;]   ] [routerlink] = r.routerLink＆GT; ] [routerlink] = r.routerLink   [routerlinkactive] =＆＃34; [＆＃39;有源＆＃39;]＆＃34;＆GT; {{r.text}}    ] [routerlinkactive] =＆＃34; [＆＃39;有效＆＃39;]＆＃34;＆gt; {{r.text}}＆＃34;）：t @ 0：674无法绑定到   ＆＃39; ngforOf＆＃39;因为它不是“a”的已知属性。（＆＃34; / DIV＆GT;
] * ngfor =＆＃34;让路由＆＃34; class =＆＃34; item mainmenu＆＃34; [routerlink] = r.routerLink＆GT; ＆＃34;）：t @ 0：540属性绑定ngforOf未被任何指令使用   在嵌入式模板上。确保属性名称拼写   正确且所有指令都列在＆＃34;指令＆＃34;部分。   （＆＃34;＆gt; [错误 - ＆gt;] {{r.text}}    ] * ngif = bolWidthLess1000＆GT！; ＆＃34;）：t @ 0：512属性绑定ngif   嵌入式模板上的任何指令都没有使用。确保   属性名称拼写正确，所有指令都列在   ＆＃34;指令＆＃34;部分。（＆＃34; routerlink] = r.routerLink   [routerlinkactive] =＆＃34; [＆＃39;有源＆＃39;]＆＃34;＆GT; {{r.text}}    [错误 - ＆gt;]

Answer 1

在加载程序查询中将minimize param设置为false，如下所示。

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

或

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

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

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

1 个答案: