webpack html-loaders lowercase angular 2 built-in directives

馋奶兔 提交于 2019-12-01 02:40:49

问题


I am using html-loader to load my html template and file-loader to load my images that are in the template. This run just fine in dev but when I run build:prod and run the output, I get a template parse error.

It appears that all angular2 built-in directives (e.g., *ngFor, *ngIf) are all converted to all lowercase (e.g., *ngfor, *ngif) which cases the error.

I tried create a separate project and this time, not using any built-in directives from angular 2, everything works fine.

Is there another loader I can use? How do i correctly load these templates along with the images used by these templates?

here is my 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'
        })

    ]


}

And below is the parse error that I get.

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 ->]


回答1:


Set the minimize param to false in the loader query as shown below.

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

Or

You can upgrade the html-loader to 0.4.3 and use the following configuration.

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



来源:https://stackoverflow.com/questions/40626168/webpack-html-loaders-lowercase-angular-2-built-in-directives

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!