Estoy usando html-loader para cargar mi plantilla html y file-loader para cargar mis imágenes que están en la plantilla. Esto funciona muy bien en dev, pero cuando ejecuto build: prod y ejecuto el resultado, obtengo un error de análisis de plantilla.

Parece que todas las directivas incorporadas angular2 (p. Ej., * NgFor, * ngIf) se convierten todas en minúsculas (p. Ej., * Ngfor, * ngif), lo que genera el error.

Intenté crear un proyecto separado y esta vez, sin usar directivas integradas de angular 2, todo funciona bien.

¿Hay otro cargador que pueda usar? ¿Cómo cargo correctamente estas plantillas junto con las imágenes utilizadas por estas plantillas?

aquí está mi 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?
Y a continuación se muestra el error de análisis que obtengo.
Error: errores de análisis de plantilla: no se puede vincular a 'routerlink' ya que no es una propiedad conocida de 'a'. ("r> Menú] [routerlink] = r.routerLink [routerlinkactive] =" ['active'] "> {{r.text}}"): t @ 0: 359 No se puede vincular a 'routerlinkactive' ya que no es una propiedad conocida de 'a'. ("" item ui red "* ngfor =" let r of routes ">] [routerlinkactive] =" ['active'] "> {{r.text}} Menú de inicio] * ngfor =" let r of routes "> Menú de inicio [ERROR ->]] * ngif = bolWidthLess1000>
[ERROR ->]] [routerlink] = r.routerLink>] [routerlink] = r.routerLink [routerlinkactive] = "['active']"> {{r.text}}] [routerlinkactive] = "['active '] "> {{r.text}}"): t @ 0: 674 No se puede enlazar a' ngforOf 'ya que no es una propiedad conocida de' a '. ("/ div>
] * ngfor = "let r of routes" class = "item mainmenu" [routerlink] = r.routerLink> "): t @ 0: 540 Enlace de propiedad ngforOf no utilizado por ninguna directiva en una plantilla incrustada. Asegúrese de que la propiedad el nombre se escribe correctamente y todas las directivas se enumeran en la sección "directivas". ("> [ERROR ->] {{r.text}}] * ngif =! bolWidthLess1000>"): t @ 0: 512 Enlace de propiedad ngif no utilizado por cualquier directiva en una plantilla incrustada. Asegúrese de que el nombre de la propiedad esté escrito correctamente y que todas las directivas estén listadas en la sección "directivas". ("routerlink] = r.routerLink [routerlinkactive] =" ['active'] "> {{r.text}} [ERROR ->]
 }
      ]

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

    ]


}

Y a continuación se muestra el error de análisis que obtengo.

Error: errores de análisis de plantilla: no se puede vincular a 'routerlink' ya que no es una propiedad conocida de 'a'. ("r> Menú] [routerlink] = r.routerLink [routerlinkactive] =" ['active'] "> {{r.text}}"): t @ 0: 359 No se puede vincular a 'routerlinkactive' ya que no es una propiedad conocida de 'a'. ("" item ui red "* ngfor =" let r of routes ">] [routerlinkactive] =" ['active'] "> {{r.text}} Menú de inicio] * ngfor =" let r of routes "> Menú de inicio [ERROR ->]] * ngif = bolWidthLess1000>

[ERROR ->]] [routerlink] = r.routerLink>] [routerlink] = r.routerLink [routerlinkactive] = "['active']"> {{r.text}}] [routerlinkactive] = "['active '] "> {{r.text}}"): t @ 0: 674 No se puede enlazar a' ngforOf 'ya que no es una propiedad conocida de' a '. ("/ div>

] * ngfor = "let r of routes" class = "item mainmenu" [routerlink] = r.routerLink> "): t @ 0: 540 Enlace de propiedad ngforOf no utilizado por ninguna directiva en una plantilla incrustada. Asegúrese de que la propiedad el nombre se escribe correctamente y todas las directivas se enumeran en la sección "directivas". ("> [ERROR ->] {{r.text}}] * ngif =! bolWidthLess1000>"): t @ 0: 512 Enlace de propiedad ngif no utilizado por cualquier directiva en una plantilla incrustada. Asegúrese de que el nombre de la propiedad esté escrito correctamente y que todas las directivas estén listadas en la sección "directivas". ("routerlink] = r.routerLink [routerlinkactive] =" ['active'] "> {{r.text}} [ERROR ->]