Ошибка сборки Angular @ngtools/ webpack при использовании режима webpack 'production'

Question

У меня возникла проблема, что как только я установил

{ mode: 'production' }

в моем webpack.config.js мои шаблоны Angular, которые были объявлены с использованием

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

не может больше компилироваться.

Все полученные ошибки были связаны с директивами, используемыми в шаблоне, например

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

Как оказалось, ошибка дает больше информации, чем может показаться. Проблема в том, что он был изменен сrouterLink к routerlink.

Когда режим производства активен, html-loaderвключает его минимизатор. Поскольку загрузчик используется для выборки шаблонов перед их передачей компилятору Angular, это вызывает ошибку.

Самый простой способ решить эту проблему - установить caseSensitive вариант html-loader к true

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

Я документирую это здесь, поэтому надеюсь, что смогу найти это, когда буду искать это через 2-3 года.