Angular 2和webpack：意外的結束標記“ a”

Question

我有這個Angular 2模板，它顯示我的網站的選項卡：

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

效果很好。 然后，我嘗試使用帶有默認選項的Webpack來創建唯一的* .js文件：它仍然可以工作。 最后，在Webpack中，我激活了用於最小化.js文件的選項，並且出現此錯誤：

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")

對這個錯誤有任何想法嗎？

這里是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

我猜問題出在htmlLoader 。 根據您的WebPack版本，你應該設置minimize在你的WebPack配置選項設置為false。

webpack 1 （在配置根目錄內）

htmlLoader: {
    minimize: false
},

webpack 2

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

]

Answer 2

/ private / home / {{i}}->不在“”中。

試試這個routerLink

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