Loading angular2 html template with angualr directive incorrectly

[chungtinhlakho]

these are the loaders i use, I can run in development just fine but when building to prod, it looks like all angular2 build-in directives are covert to lower cases.

    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?$' }
      ]

when I do a prod build and run the output, I get a template parse error.

Error: Template parse errors:
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("r> Menu <div class="item ui red" *ngfor="let r of routes"> <a [ERROR ->][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"> <a [routerlink]=r.routerLink [ERROR ->][routerlinkactive]="['active']">{{r.text}} <div class="ui red pointin"): t@0:385
Can't bind to 'ngforOf' since it isn't a known property of 'div'. ("pan class=text>Home

Menu

<div class="item ui red" [ERROR ->]*ngfor="let r of routes"> <a [routerlink]=r.routerLink [routerlinkacti"): t@0:299
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. ("ss="sidebar icon"> Home

Menu

[ERROR ->]<div class="item ui red" *ngfor="let r of routes"> <a [routerlink]=r.r"): t@0:274
Can't bind to 'ngif' since it isn't a known property of 'div'. ("

<div class="ui red pointing inverted menu mainmenu" [ERROR ->]*ngif=bolWidthLess1000>

<i class="si"): t@0:79
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. ("

[ERROR ->]<div class="ui red pointing inverted menu mainmenu" *ngif=bolWidthLess1000> <div class="ui red floati"): t@0:27
Can't bind to 'routerlink' since it isn't a known property of 'a'. (" inverted menu mainmenu" *ngif=!bolWidthLess1000> <a *ngfor="let r of routes" class="item mainmenu" [ERROR ->][routerlink]=r.routerLink> <a [routerlink]=r.routerLink [routerlinkact"): t@0:587
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("let r of routes" class="item mainmenu" [routerlink]=r.routerLink> <a [ERROR ->][routerlink]=r.routerLink [routerlinkactive]="['active']">{{r.text}}

<"): t@0:648
Can't bind to 'routerlinkactive' since it isn't a known property of 'a'. ("em mainmenu" [routerlink]=r.routerLink> <a [routerlink]=r.routerLink [ERROR ->][routerlinkactive]="['active']">{{r.text}}

"): t@0:674
Can't bind to 'ngforOf' since it isn't a known property of 'a'. ("/div>

<div class="ui red pointing inverted menu mainmenu" *ngif=!bolWidthLess1000> <a [ERROR ->]*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. ("> <div class="ui red pointing inverted menu mainmenu" *ngif=!bolWidthLess1000> [ERROR ->]<a *ngfor="let r of routes" class="item mainmenu" [routerlink]=r.routerLink> <i class="{{r.icon}} ico"): t@0:537
Can't bind to 'ngif' since it isn't a known property of 'div'. ("e']">{{r.text}} <div class="ui red pointing inverted menu mainmenu" [ERROR ->]*ngif=!bolWidthLess1000> <a *ngfor="let r of routes" class="item mainmenu" [routerlink]=r.routerLink>"): 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 ->]<div class="ui red pointing inverted menu mainmenu" *ngif=!bolWidthLess1000> <a *ngfor="let r of rout"): t@0:460

[KostyaEsmukov]

See #67 for a solution with Angular 2 templates