Angular 2 和 webpack：意外的结束标记“a”答案

【问题标题】：Angular 2 and webpack: unexpected closing tag "a"Angular 2 和 webpack：意外的结束标记“a”
【发布时间】：2016-11-29 20:46:42
【问题描述】：

我有这个 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>'}

【问题讨论】：

几件事：你在使用angular-cli吗？另外，我很惊讶这有效。 routerLink 应该是一个绑定属性并接受一个代表路径的array of values，所以它应该看起来像< a [routerLink]="['/private', 'home', i]"></a>。最后，您使用*ngIf 来渲染组件而不是<router-outlet> 是否有原因？路由器插座是更正确的方法，但我很想知道是否有特定情况需要这样做。

标签： angular webpack

【解决方案1】：

我想问题出在htmlLoader 上。根据您的 webpack 版本，您应该在 webpack 配置中将 minimize 选项设置为 false。

webpack 1（在配置的根目录中）

htmlLoader: {
    minimize: false
},

webpack 2

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

]

【讨论】：

【解决方案2】：

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

为 routerLink 试试这个

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

【讨论】：

谢谢。它可以工作，但现在我在其他文件中有很多错误。当模板文件未内联在 .ts 文件中时，似乎 webpack 不能正确处理 Angular 2 语法。
我使用 angular 2.2.x 版本和 angular-cli，模板文件位于不同的位置，看起来不错。如果您有任何问题，请让我们为您提供帮助。