3

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);
BBaysinger
  • 6,614
  • 13
  • 63
  • 132

2 Answers2

4

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
michalczukm
  • 9,963
  • 6
  • 40
  • 47
  • Cool!... This was so long ago, I don't remember how we got around it. Probably figured out a workaround. Did you verify that IE11 does output the same error? Anything on Github about this issue? – BBaysinger Apr 11 '18 at 21:51
  • ...Ok, now I vaguely remember figuring this out. I went back in the git history, and see where we fixed it. Pretty sure I didn't answer the question here because we were under such a mad push to get the project out. Thanks for answering the question! – BBaysinger Apr 11 '18 at 23:49
  • 1
    Yes - I was fighting this issue yesterday while adding IE11 support for our application :) Good point - I'll paste the error, for better discoverability. – michalczukm Apr 12 '18 at 07:16
0

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

Prav
  • 2,785
  • 1
  • 21
  • 30
  • I'm not familiar with this syntax at all, or how to alter the output from Webpack/Angular-CLI. – BBaysinger Jun 13 '17 at 21:18
  • These two links explain this more. https://stackoverflow.com/questions/32853924/angular-2-how-to-style-host-element-of-the-component https://alligator.io/angular/styles-between-components-angular/ Could you also grive us bit more code than just one line so we can understand it. – Prav Jun 13 '17 at 21:21
  • I've updated the question. Thanks for your help so far. – BBaysinger Jun 13 '17 at 21:33
  • How does this code get compiled. Because I never seen anything adding `\n` and `\` before? – Prav Jun 13 '17 at 21:42