7

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

4

1 回答 1

11

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

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

或者

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

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

于 2016-11-16T07:30:28.510 回答