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 启用它的最小化程序。由于加载器用于获取模板 before 它被传递给 Angular 编译器，这会设置错误。

解决此问题的最简单方法是将 html-loader 的 caseSensitive 选项设置为 true

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

我在这里记录下来，希望在 2 或 3 年后搜索时能找到它。

Angular @ngtools/webpack 使用 webpack 模式构建失败 'production'

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

javascript

webpack

angular

ngtools