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

时间:2017-06-13 18:06:58

标签: javascript angular typescript internet-explorer internet-explorer-11

我有我的pollyfill并且我在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);

2 个答案:

答案 0 :(得分:4)

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

错误原因

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

原因是:您已将styleUrlsstyles添加到一个组件中。 您可以在粘贴的webpack包代码中清楚地看到它们,styles属性创建了2次。

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

解决方案

重新排列您的样式并移除stylesstyleUrls。只留下其中一个。

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

答案 1 :(得分:0)

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