严格模式下不允许属性的多个定义 - Angular

Question

我在 IE 的 Angular (6) 项目中遇到了这个问题，导致应用无法加载。它只发生在应用程序的 prod 构建中，由 Angular 连接和缩小。在“ng serve”下运行的本地开发版本不会导致问题。此错误出现在 Chrome 开发控制台中：

SCRIPT1046: Multiple definitions of a property not allowed in strict mode
File: main.51c74b0704ecaa189364.js, Line: 1, Column: 1263758

这是它所指的缩小主脚本中的位置：

(6,{"col-6":0,"col-6":1})

Answer 1

我发现我有几个地方我的 ngClass 为不同的评估设置了相同的类。我有一个通用库函数 mobile() ，我用它来确定我们是在移动设备上还是小型桌面上，并相应地设置我的类（特别是引导列、边距、填充等）。例如：

<div [ngClass]="{'col-12': mobile(), 'col-6': !mobile()}">

有几个地方我在这两种情况下都使用了同一个类，如下所示：

<div [ngClass]="{'col-6': mobile(), 'col-6': !mobile()}">                            

我意识到 Bootstrap 有诸如 col-sm-6 和 col-md-6 之类的类来启用类似的变体，但这在这里无关紧要。这些类可以命名为“foo”，如果两种情况都分配了同一个类，那就是导致问题的原因。一旦我将上面的内容重构为只使用一个类，就很好了。

<div class='col-6'>

就根本原因而言，我不知道，但欢迎任何意见。奇怪的是，由于这个（Duplicate identifier ''col-6''）破坏了构建，我曾经遇到过编译器错误。但这段代码没有编译器错误，它构建和部署干净，只影响 IE。我找到它的唯一方法是在错误附近查找一些未缩小的 HTML 文本，以了解从哪里开始查找。