pdcc pdcc - 3 months ago 31
AngularJS Question

uglifyjsplugin breaking angular 2 templates

I have this configuration of uglifyjsplugin in my webpack config file:

exports.minify = function() {
return {
plugins: [
new webpack.optimize.UglifyJsPlugin({
beautify: false,
comments: false,
compress: {
warnings: false,
drop_console: true
},
// Mangling specific options
mangle: false
})
]
}
}


My problem is that uglify breaks my code, if i run my build without uglify the code works but if i add uglify step i get this error:

Unexpected closing tag "a" ("d-top"> <div class=container-fluid> <div class=navbar-header> <a href=/ class=navbar-brand>{{title}}[ERROR ->]</a> <button type=button class=navbar-toggle data-toggle=collapse data-target=.navbar-collapse> <span"): HeaderComponent@0:145


I already run with many configurations for uglify but the error persist. My original angular template that gives the error is that:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="/" class="navbar-brand">{{title}}</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li><a href="#" data-toggle="dropdown">General Info</a></li>
<li><a href="#" data-toggle="dropdown">Author</a></li>
</ul>
</div>
</nav>

Answer

Template parse is not working properly as it should and angular team has provided a work around on their docs for right now but hope fully it should be fix soon in webpack.config file add this

  htmlLoader: {
    minimize: false // workaround for ng2
  },

workaround from angular.io

other as mentioned from @pdcc

{
    test: /\.html$/,
    loader: `html?-minimize`
}