uglifyjsplugin breaking angular 2 templates

Question

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>

are you using angular2-template-loader? i'm also using webpack but i don't have any issue while using uglifyjsplugin — Jorawar Singh, Aug 16 '16 at 20:54
yes, like that: loaders: [ { test: /\.ts$/, loaders: ['ts', 'angular2-template-loader'], include: PATHS.components }, { test: /\.html$/, loader: "html" } ] — pdcc, Aug 16 '16 at 21:06
i just used your plugin in my webpack and it seems to work fine therre is nothing wrong with the plugin. sure [here is the link of my seed](https://github.com/blinfo/angular2-webpack-seed/tree/master/config) — Jorawar Singh, Aug 16 '16 at 21:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121102/discussion-between-mrjsingh-and-pdcc). — Jorawar Singh, Aug 16 '16 at 21:10
I don't think that it has to do something with webpack. Check your ts loader version. Do you have repo on github? — Jorawar Singh, Aug 17 '16 at 21:11
Can you try to upgrade your ts-loader to latest version and use ts-loader from webpack instead ts? I'll try your code in a short. — Jorawar Singh, Aug 17 '16 at 21:25

score 3 · Accepted Answer · answered Aug 17 '16 at 23:26

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

score 1 · Answer 2 · answered Aug 17 '16 at 23:23

1

After some hours i found the solution. In the html loader we must add minimize:

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

answered Aug 17 '16 at 23:23

pdcc

363
5
17

uglifyjsplugin breaking angular 2 templates

2 Answers2

Linked