The new minimize feature is causing Angular build to fail

[JonWallsten]

• Operating System: Windows
• Node Version: 12.14.1
• NPM Version: 6.13.4
• webpack Version: 4.42.1
• html-loader Version: 4.0.1

Expected Behavior

The default configuration should not mess up the build for all Angular users

Actual Behavior

Since minimize is enabled as default for production builds it automatically fails Angular's production build when you update this package.

How Do We Reproduce?

Use Webpack and AngularCompilerPlugin to compile you Angular build.

I will close this as soon as it's created. I just want people to be able to search for this issue so they don't have to dig into this like I had to.

Solution

Turn of minimize:

{
    test: /\.html$/,
    loader: 'html-loader',
    options: {
        minimize: false
    }
},

Keywords: html-loader webpack angular build fail ivy compile

[alexander-akait]

@JonWallsten What is a problem? Maybe we can fix it on loader side

[JonWallsten]

@evilebottnawi I get hundreds of error, but they are all of the same kind.

NG8002: Can't bind to 'formcontrol' since it isn't a known property of 'input'
NG8002: Can't bind to 'inputvalue' since it isn't a known property of 'input-character-counter'
NG8003: No directive found with exportAs 'matMenuTrigger'

So something is happening with the template (i use external html files) that causes Angular to not being able to compile. I'm using their new compiler IVY which makes it even worse trying to figure out what's happening.

[alexander-akait]

@JonWallsten Can you create reproducible test repo? I want to investigate and look what we can do

[JonWallsten]

@JonWallsten Can you create reproducible test repo? I want to investigate and look what we can do

Sure! I'll send you an invite to a private repo as soon as it's done.

[alexander-akait]

Great!

[chumbalum]

I'm having the same issue with angular prod builds. Went back to html-loader 0.5.5 for now

[JonWallsten]

@evilebottnawi: You're invited now. I'll add instructions in an open issue in the repo.

[alexander-akait]

@JonWallsten Thanks I will look at that tomorrow ⭐

[chumbalum]

I found a solution for the problem. The console output in my application was

Error: Template parse errors:
Can't bind to 'ngif' since it isn't a known property of 'span'. ("<span class="spinner" [ERROR ->]*ngif="loading">

I noticed that ngif is mentioned in small case

So the following config of html-minifier-terser did the trick

test: /\.html$/,
use: [{
	loader: "html-loader",
	options: {minimize: {caseSensitive: true}}
}]

The caseSensitive option is false by default. I also experimented with the customAttrAssign option but as far as I can tell, all angular attributes are working out of the box.

Edit:
The option removeAttributeQuotes also seems to be a problem. So with the following config, my compilation succeeded

use: [{
	loader: "html-loader",
	options: {
		minimize: {
			caseSensitive: true,
			collapseWhitespace: true,
			conservativeCollapse: true,
			keepClosingSlash: true,
			minifyCSS: true,
			minifyJS: true,
			removeAttributeQuotes: false,
			removeComments: true,
			removeScriptTypeAttributes: true,
			removeStyleLinkTypeAttributes: true,
			useShortDoctype: true
		}
	}
}]

(since removeAttributeQuotes is false by default, the option could be removed in https://github.com/webpack-contrib/html-loader/blob/master/src/plugins/minimizer-plugin.js)

[JonWallsten]

@chumbalum: Nice find! Now I feel embarrassed I didn't even take the time to realize my own template variables were all in lowercase in the error messages.

[alexander-akait]

@chumbalum Thanks for investigation, maybe we can detect what it is angular template and uses other settings for minimizer, if not we should documented that

[dreyks]

I really think html loader should not be responsible for the minification. or at least this should be opt-in, not opt-out

I'm using html-loader in a pipeline, so that other loaders come after it. During the minify phase html-loader removed attribute quotes because the values did not have any spaces in them but after the next loader (which is handlebars-loader) expanded the variables the html became broken

Moreover, since minification by default only happens in production, the issue was only caught on CI (good thing we run them in prod mode, which as i know not everybody does)

UPD: I know about the preprocess option but i can't use it since i'm using handlebars with marionette and marionette expects the template to be a function and not a string

[alexander-akait]

@dreyks we already use minimizer in production mode - for js/css/html/etc, it is good DX to set mode: "production" and forget about other options in the config.

During the minify phase html-loader removed attribute quotes because the values did not have any spaces in them but after the next loader (which is handlebars-loader) expanded the variables the html became broken

Please procide reproducible test repo, I will think how we can improve it