使用 webpack 模式“生產”時，Angular @ngtools/webpack 構建失敗

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 編譯器之前獲取模板，因此會產生錯誤。

解決此問題的最簡單方法是將html-loader的caseSensitive選項設置為true

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

我在這里記錄了這一點，所以我希望在 2 或 3 年后搜索它時能找到它。