Angular @ngtools/webpack build fails when using webpack mode 'production'

Question

I've been having the issue, that as soon as I set

{ mode: 'production' }

in my webpack.config.js my Angular templates that have been declared using

@Component({ templateUrl: 'path/to/template.html' })

could not longer be compiled.

The resulting errors were all related to directives used in the template, e.g.

src/path/to/template.html:1:123 - error NG8002: Can't bind to 'routerlink' since it isn't a known property of 'a'

Answer 1

As it turns out the error gives more information than it may seem. The issue is actually, that it's been changed from routerLink to routerlink.

When the production mode is active, the html-loader enables it's minimizer. Since the loader is used for fetching the templates before it's passed to the Angular compiler, this sets up the error.

The easiest way to fix this issue, is to set the caseSensitive option of the html-loader to true

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

I'm documenting this here, so I can hopefully find it when I search for it in 2 or 3 years from now.