diretivas internas angulares 2 minúsculas do webpack html-loaders

Estou usando o html-loader para carregar meu modelo html e o carregador de arquivos para carregar minhas imagens que estão no modelo. Isso funciona muito bem no dev, mas quando executo build: prod e executo a saída, recebo um erro de análise de modelo.

Parece que todas as diretivas internas do angular2 (por exemplo, * ngFor, * ngIf) são todas convertidas para todas as minúsculas (por exemplo, * ngfor, * ngif) que causam o erro.

Tentei criar um projeto separado e, desta vez, sem usar diretivas internas do angular 2, tudo funciona bem.

Existe outro carregador que eu possa usar? Como carrego corretamente esses modelos junto com as imagens usadas por esses modelos?

aqui está o meu 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'
        })

    ]


}

E abaixo está o erro de análise que recebo.

Erro: erros de análise de modelo: Não é possível vincular ao 'routerlink', pois não é uma propriedade conhecida de 'a'. ("r> Menu] [routerlink] = r.routerLink [routerlinkactive] =" ['ativo'] "> {{r.text}}"): t @ 0: 359 Não é possível vincular a 'routerlinkactive', pois não é uma propriedade conhecida de 'a'. ("" item ui red "* ngfor =" deixe r de rotas ">] [routerlinkactive] =" ['active'] "> {{r.text}} Menu Inicial] * ngfor =" deixe r de rotas "> Menu inicial [ERRO ->]] * ngif = bolWidthLess1000>

[ERRO ->]] [roteador link] = r.routerLink>] [roteador link] = r.routerLink [roteador linkativo] = "['ativo']"> {{r.text}}] [roteador ativo] = "['ativo '] "> {{r.text}}"): t @ 0: 674 Não é possível vincular a' ngforOf ', pois não é uma propriedade conhecida de' a '. ("/ div>

] * ngfor = "deixe r das rotas" class = "item menu principal" [routerlink] = r.routerLink> "): t @ 0: 540 Ligação de propriedade ngforOf não usada por nenhuma diretiva em um modelo incorporado. Certifique-se de que a propriedade name está escrito corretamente e todas as diretivas estão listadas na seção "diretivas". ("> [ERRO ->] {{r.text}}] * ngif =! bolWidthLess1000>"): t @ 0: 512 Ligação de propriedade ngif not usado por qualquer diretiva em um modelo incorporado. Verifique se o nome da propriedade está escrito corretamente e se todas as diretivas estão listadas na seção "diretivas". ("routerlink] = r.routerLink [routerlinkactive] =" ['active'] "> {{r.text}} [ERRO ->]