Angular 2+：在 IE11 的严格模式下不允许属性的多个定义

Question

我有我的 pollyfills，我在我的 main.bundle.js 中收到来自 Internet Explorer 11 的这个错误。它位于第 9692 行，但查看编译后的代码，我无法理解它。这是：

    styles: ["\nng-select-custom >>> .caret {\n  /* display: none; */\n}\nng-select-custom >>> .ui-select-match-text {\n  white-space: normal;\n  line-height: 21px;\n}\nng-select-custom >>> .ui-select-toggle {\n  overflow: hidden;\n}\n"]

这是 Angular 2+ 的常见问题吗？我没有看到任何有关 NG2+ 的帖子。

更新：这里是相关代码的更多上下文：

DropdownRuleInputComponent = __decorate([
    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
        selector: 'dropdown-rule-input',
        template: "\n  <ng-select-custom\n    [class.invalid]=\"invalidShowing\"\n    [items]=\"items\"\n    [active]=\"activeSelection\"\n    (selected)=\"selection = $event\"\n    placeholder=\"Click for options\">\n  </ng-select-custom>\n  ",
        styles: [__webpack_require__("../../../../../../pushgraph-client/lib/search/rule-inputs/default-styles.sass")],
        styles: ["\nng-select-custom >>> .caret {\n  /* display: none; */\n}\nng-select-custom >>> .ui-select-match-text {\n  white-space: normal;\n  line-height: 21px;\n}\nng-select-custom >>> .ui-select-toggle {\n  overflow: hidden;\n}\n"]
    }),
    __metadata("design:paramtypes", [typeof (_d = typeof __WEBPACK_IMPORTED_MODULE_3__shared_search_service__["a" /* SearchService */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_3__shared_search_service__["a" /* SearchService */]) === "function" && _d || Object])
], DropdownRuleInputComponent);

Answer 1

我相信它是在抱怨这个 ng-select-custom >>>。我的语法改为 host: >>> 。不太确定缺少导致此问题的 host 变量。

Answer 2

我有同样的问题，它仍然存在于 Angular。

错误原因

SyntaxError: Multiple definitions of a property not allowed in strict mode

原因是：您已将 styleUrls 和 styles 添加到一个组件中。您可以在粘贴的 webpack 捆绑代码中清楚地看到它们，styles 属性被创建了 2 次。

奇怪的是只有 IE 11 有问题:)

解决方案

重新排列样式并删除 styles 或 styleUrls。只留下其中一个。

IE11 中损坏的组件示例

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  // with both `styleUrls` and `styles` IE11 crashes
  styles: [`
    h2 {
      color: red;
    }
  `]
})
export class AppComponent {}

重现环境

我已经在新的 Angular 版本上检查过了，它仍然是一个问题:

Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Angular 2+：在 IE11 的严格模式下不允许属性的多个定义

Angular 2+: Multiple definitions of a property not allowed in strict mode in IE11

javascript

internet-explorer

typescript

internet-explorer-11

angular

错误原因

解决方案

IE11 中损坏的组件示例

重现环境

Angular 2+：在 IE11 的严格模式下不允许 属性 的多个定义

Angular 2+: Multiple definitions of a property not allowed in strict mode in IE11

javascript

internet-explorer

typescript

internet-explorer-11

angular

错误原因

解决方案

IE11 中损坏的组件示例

重现环境

Angular 2+：在 IE11 的严格模式下不允许属性的多个定义