Angular 2+:IE11中严格模式下不允许属性的多个定义 [英] Angular 2+: Multiple definitions of a property not allowed in strict mode in IE11

问题描述

我输入了pollyfills，并且在main.bundle.js中从Internet Explorer 11中收到此错误.它在9692行上，但是查看编译后的代码，我无法理解它.在这里:

I have my pollyfills in and I'm getting this error from Internet Explorer 11 in my main.bundle.js. It's on line 9692, but looking at the compiled code, I'm not able to make any sense of it. Here it is:

    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 +的任何帖子.

Is this a common issue for Angular 2+? I'm not seeing any posts about this with NG2+.

更新:这里是有关代码的更多上下文:

Update: Here's a little more context for the code in question:

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);

推荐答案

我遇到了同样的问题，它仍然存在于Angular中.

I had the same issue, it still exists in Angular.

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

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

The reason is: you've added both styleUrls and styles to one component. You can clearly see them in your pasted webpack bundle code, that styles property is created 2 times.

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

Strange thing is that only IE 11 has a problem with it :)

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

Rearange your styles and remove styles or styleUrls. Leave only one of them.

@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版本上进行了检查，但这仍然是一个问题:

Environment to reproduce

I've checked it on fresh Angular version, and it's still a problem:

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中严格模式下不允许属性的多个定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！