问题

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"]

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

回答1:

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

Reason of error

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

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.

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

Solution

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

Example of component broken in 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 {}

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

回答2:

I belive its complaining about this ng-select-custom >>>. My syntax has host: >>> instead. Not too sure missing host variable causing this issue.

来源：https://stackoverflow.com/questions/44528605/angular-2-multiple-definitions-of-a-property-not-allowed-in-strict-mode-in-ie1

标签

javascript