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

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

    ]


}

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

错误:模板解析错误:无法绑定到'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}}主菜单]*ngfor ="let r of routes">主菜单[错误 - >]]*ngif = bolWidthLess1000>

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

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

Answer 1

在loader查询中将minimize param设置为false,如下所示.

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

要么

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

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