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

我有同样的问题，它仍然存在于 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

Answer 2

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