Build breaks with UglifyJsPlugin and angular2 html syntax about html-loader HOT 10 CLOSED

I don't think this has anything to do with uglifyJS, and is really in html-minifier. If the webpack build is being optimized/minimized per https://github.com/webpack/html-loader/blob/5fb1cf3b29254d5e47d598f009434aa7c52fa2e1/index.js#L60 I consistently hit this issue. If it is not being minimized, everything works correctly.

I've tried using this loader configuration (using the examples provided in the html-minifier comment linked above), but it will still fail to load the .html modules:

{
  test: /\.html$/,
  loader: 'html',
  query: {
    minimize: true,
    // Teach html-minifier about Angular 2 syntax
    customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
    customAttrAssign: [ /\)?\]?=/ ],
  }
}

Edit: In the meantime, I disable minification of my HTML templates even in prod builds with:

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

from html-loader.

html?-minimize solved it for me, as @doxavore suggested.

from html-loader.

This is a duh but caught me. Make sure if you are also using interpolate or some other query param you include the & for example html?interpolate=require&-minimize

from html-loader.

kangax/html-minifier#289 (comment) includes examples of custom options customAttrAssign and customAttrSurround:

{
  customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
  customAttrAssign: [ /\)?\]?=/ ]
}

However, I'm not sure how we manage to get that into query options. Are there any other options to get custom JS data or code into the html-loader pipeline, so this may be done without (1) hacking something angular2-specific or (2) forking?

from html-loader.

I just tried and it works for me. I use a (click)="..." on a template that is loaded with html-loader and then ran uglify to it and it works.

from html-loader.

Ohh, I get you now. I am not using minimize no.

from html-loader.

I have been chasing this the last couple of hours. For me, the html-loader completely hung when trying to minimize (implicitly triggered via the UglifyJsPlugin) the style-binding here:

<div class="item active carousel-item-type carousel-item-type-html" data-itemno="0" style="padding-left: 0; padding-right: 0;"
     [style.background-image]="'url(\'' + svgUrl + '\')'"
     >
</div>

The moment I excluded the second line from that template, it stopped hanging as it did when explicitly disabling minification on the loader.

from html-loader.

html?-minimize did the trick for me as well .

from html-loader.

html?-minimize fixed it for me too.

from html-loader.

https://github.com/webpack-contrib/html-loader/releases/tag/v1.0.0-alpha.0

from html-loader.