I have this Angular 2 template which display tabs of my Web site:
<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>
It works perfectly well. Then, I try to use Webpack with default option to create unique *.js file: it still works. Finally, in Webpack, I active the option to minimize the .js file and I get this error:
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")
Any idea on this error ?
Here the related code generated by 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>'}
I guess the issue is with the htmlLoader
. Depending on your webpack version you should set the minimize
option to false in your webpack configuration.
webpack 1 (inside the root of your configuration)
htmlLoader: {
minimize: false
},
webpack 2
plugins: [
new webpack.LoaderOptionsPlugin({
options : {
htmlLoader : {
minimize : false
}
}
})
]
/private/home/{{i}} -> this is not in "".
try this for routerLink
<a [routerLink]="['/private/home/',i]">{{tab}}</a>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.