首页 文章

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

提问于
浏览
4

我使用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']“> {}”):t @ 0:359无法绑定到'routerlinkactive',因为它不是'a'的已知属性 . (“”item ui red“* ngfor =”let r of routes“>] [routerlinkactive] =”['active']“> {}主菜单] * ngfor =”let r of routes“>主菜单[错误 - >]] * ngif = bolWidthLess1000> [错误 - >]] [routerlink] = r.routerLink>] [routerlink] = r.routerLink [routerlinkactive] =“['active']”> {}] [routerlinkactive] =“['active']”> {}“):t @ 0:674无法绑定到'ngforOf',因为它不是''的已知属性'一个' . (“/ div>] * ngfor =”let r of routes“class =”item mainmenu“[routerlink] = r.routerLink>”):t @ 0:540属性绑定ngforOf未被嵌入式模板上的任何指令使用 . 确保属性名称拼写正确,并且所有指令都列在“指令”部分中 . (“> [ERROR - >] {}] * ngif =!bolWidthLess1000>”):t @ 0:512属性绑定ngif未被嵌入式模板上的任何指令使用 . 确保属性名称拼写正确,并且所有指令都列在“指令”部分中 . (“routerlink”= r.routerLink [routerlinkactive] =“['active']”> {} [错误 - >]

1 回答

  • 7

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

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

    Or

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

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

相关问题