Build breaks with UglifyJsPlugin and angular2 html syntax

[andreialecu]

When minifying, if a template contains angular2 syntax like <a (click)="..." [something]="..."> the build fails with a Parse Error.

See: https://github.com/kangax/html-minifier/issues/422 https://github.com/webpack/webpack/issues/992

[doxavore]

https://github.com/kangax/html-minifier/issues/289#issuecomment-180971821 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?

[Foxandxss]

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.

[doxavore]

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

[Foxandxss]

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

[Tragetaschen]

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.

[bbottema]

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

[lekhnath]

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

[khronic]

html?-minimize fixed it for me too.

[jrgleason]

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

[michael-ciniawsky]

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

[theangular]

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

https://angulars.space/questions/tips-for-compressing-html-templates-using-angular2-and-webpack