Last Updated: May 30, 2016
·
4.563K
· nadavsinai

Using webpack html-loader with angular2

Angular2 has its new templating syntax, for good and for bad...
Unfortunately html-loader's default use of htmlmin will result in errors in compilation as soon as you add you first *nfFor (or any other * template directive)

Of course that one can use the alternative template- syntax or remove use of minification, but github user @uglow has discovered a configuration that woks
oiginal comment here this was a great find for me:

config.module.loaders.push({
      test: /\.html$/,
      loader: 'html-loader'
});

config.htmlLoader = {
  minimize: true,
  removeAttributeQuotes: false,
  caseSensitive: true,
  customAttrSurround: [ [/#/, /(?:)/], [/\*/, /(?:)/], [/\[?\(?/, /(?:)/] ],
  customAttrAssign: [ /\)?\]?=/ ] 
};