Angular 2 und webpack: unerwarteter Schluss-Tag "a"

Question

Ich habe diese Angular 2 Schablone, die Anzeige Registerkarten meiner Website:

<div id="menu"> 
    <ul id="tabs"> 
     <li *ngFor="let tab of tabs; let i = index" [class.active]="selectedTab===i"> 
      <a routerLink="/private/home/{{i}}">{{tab}}</a> 
     </li> 
    </ul> 
</div> 

<div class="tabContent"> 
    <span *ngIf="selectedTab==0"><welcome></welcome></span> 
    <span *ngIf="selectedTab==1"><boiler></boiler></span> 
</div> 

Es ist durchaus gut funktioniert. Dann versuche ich, Webpack mit der Standardoption zu verwenden, um eine einzigartige * .js-Datei zu erstellen: es funktioniert immer noch. Schließlich in Webpack, ich aktiv die Möglichkeit, die JS-Datei zu minimieren und ich bekomme diese Fehlermeldung:

Unexpected closing tag "a" (" of tabs; let i = index" [class.active]="selectedTab===i"> 
<a routerlink=/private/home/{{i}}>{{tab}}[ERROR ->]</a> </li> </ul> </div>     
<div class=tabContent> <span *ngif="selectedTab==0"><welcome></welcome></span") 

Jede Idee zu diesem Fehler?

Hier die zugehörige Code generiert durch Webpack:

function(t,e){t.exports='<div id=menu> <ul id=tabs> <li *ngfor="let tab of tabs; 
let i = index" [class.active]="selectedTab===i"> 
<a routerlink=/private/home/{{i}}>{{tab}}</a> </li> </ul> </div> <div class=tabContent> 
<span *ngif="selectedTab==0"><welcome></welcome></span> <span *ngif="selectedTab==1"> 
<boiler></boiler></span> </div>'} 

Answer 1

Ich denke, das Problem mit dem htmlLoader ist. Abhängig von Ihrer Webpack-Version sollten Sie die Option minimize in Ihrer Webpack-Konfiguration auf false setzen.

webpack 1 (innerhalb der Wurzel Ihrer Konfiguration)

htmlLoader: { 
    minimize: false 
}, 

webpack 2

plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
     options : { 
      htmlLoader : { 
       minimize : false 
      } 
     } 
    }) 

] 

Answer 2

/private/home/{{i}} -> das ist nicht in "".

versuchen, dies für Router

<a [routerLink]="['/private/home/',i]">{{tab}}</a>