Strict mode in IE11 does not allow multiple definitions of a property in Angular 2+

After adding pollyfills, I encountered an error in Internet Explorer 11 within my main.bundle.js file on line 9692. Despite examining the compiled code, I am unable to decipher its meaning. The snippet of code causing the issue is as follows:

    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 problem with Angular 2+? I have not found any relevant discussions regarding NG2+.

Update: Providing additional context for the problematic code:

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);
javascriptangulartypescriptinternet-explorerinternet-explorer-11

Answer №1

I encountered a similar issue within the Angular framework.

Cause of the Problem

SyntaxError: Multiple definitions of a property are not permitted in strict mode

The issue arises when both styleUrls and styles are added to a single component. Upon inspecting the webpack bundle code, it is evident that the styles property is being created twice.

An interesting observation is that only Internet Explorer 11 seems to have trouble with this particular scenario :)

Resolution

To resolve this problem, reorganize your styles and eliminate either styles or styleUrls. Keep only one of them for proper functionality.

Example of Component Malfunctioning in IE11

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  // having both `styleUrls` and `styles` will cause issues in IE11
  styles: [`
    h2 {
      color: red;
    }
  `]
})
export class AppComponent {}

Environment Setup for Reproduction

I validated this issue on a new Angular version, and it still persists:

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

It seems to be raising concerns about the usage of ng-select-custom >>>. In my code, I have used host: >>> instead. I am uncertain if the absence of the host variable is what's leading to this problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Performance comparison between static and dynamic interpolation techniques in Angular.js

Could you explain the discrepancies between: A: {{ variable | filter }} and B: {{ 'static string' | filter }} I have a few questions regarding this: Are both considered interpolations or just A? Does A utilize $interpolate, while B utilizes ...

javascriptangularjsperformancetemplatesstring-interpolation

What is the best way to receive several responses from a PHP file using AJAX?

My PHP file is handling 2 operations: 1. Submitting data from a form into a database table, and 2. Sending an email. I am looking to display status messages through ajax. For instance, showing "First operation done, please wait for the second" and then di ...

phpjavascriptajaxjquery

Dynamic tab index in Vue-form-wizard based on the route

I'm looking to enhance my tab navigation by incorporating URLs. With the Tab-content property route, I can specify an anchor that will be displayed in the URL. By using the Form-wizard property start-index, I can easily navigate to the correct tab. ...

javascripthtmlvue.jstabs

Retrieve service status using Javascript

Currently, I am working on a web application that receives user updates from a different domain's web service. My goal is to retrieve these updates every 10 seconds. To initiate the service call for the first time, I implement a script insertion dyna ...

javascriptajaxdom-eventscross-domain

Clicking on a checkbox within an HTML table that incorporates handlebar and Express.js

My situation involves a HTML table within a form that is being populated with Handlebars. I need to be able to select certain rows in the table using checkboxes, and upon form submission through a POST request in an Express.js framework, I require the JSON ...

javascriptjqueryhtmlexpresshandlebars.js

Allow Nest.js server to receive binary files in the request body

Is there a way to retrieve the uploaded binary file data from the browser? While the Nest.js server application functions correctly with Postman, it throws a 400 error when the request is sent from the Google Chrome/Angular application. Any ideas on how ...

node.jsangularexpressbinaryfiles

Is there a way to set up HTML5 Video.js in Boonex Dolphin?

My current project involves utilizing the Video.js Source Code to update the video player on my website that currently uses Boonex Dolphin. I am looking to transition from the flash player used by Dolphin to HTML5. Dolphin's modules contain specific f ...

javascriptphphtmlvideoboonex-dolphin

The webpack task has failed because it cannot read the property 'forEach' of an undefined object

Encountering errors during the build process of a jhipster project when running ./gradlew in the project's directory. Starting a Gradle Daemon (subsequent builds will be faster) > Task :webpack > <a href="/cdn-cgi/l/email-protection" class ...

node.jsangularnpmwebpackjhipster

Having trouble retrieving JSON data using ajax

I am currently working with JSON data that is being generated by my PHP code. Here is an example of how the data looks: {"Inboxunreadmessage":4, "aaData":[{ "Inboxsubject":"Email SMTP Test", "Inboxfrom":"Deepak Saini <*****@*****.co.in>"} ...

javascriptjqueryjsonajax

Extracting information from a service within a component using Angular 2

Recently, I developed a component to manage products. ngOnInit(){ this.products = []; this.products = this.product.all(); } Within my services class, I fetch the products in the constructor and access them using the all method. constructor(private ...

angular

TypeError: Unable to find TextEncoder in mongoose and jest when using TypeScript

Currently, I am working on a project using Node 14 along with Express v4.16.3 and Typescript (v4.7.4). Recently, I added Mongoose (v6.5.2) to the project, and while the logic code seems fine, most of the tests executed by Jest (v26.4.2) are failing with th ...

node.jstypescriptmongoosejestjs

Tips for composing content on a sanitized input?

In my small application, I have a feature where a question is displayed with certain words hidden and needs to be filled in by the user. The format of the question looks like this: The {0} {1} {2} his {3} off To achieve this functionality, I wrote the f ...

angulartypescripthtml-sanitizing

Processing intricate data in Angular 4

There are three classes in my codebase, namely A, B, and C. Here is how they are structured: class A{ id: number; name: string; //... more items: B[]; } class B{ id: number; name: string; //... more otherItems: C[]; } class C{ ...

angularangular-resolver

Obtain the last x elements

What is the most efficient way to extract a specific number of elements from the end? <div><span>1</span></div> <div><div>looks like 2</div></div> <div>three!!</div> For instance, how could I re ...

phpjavascriptjquerydomdomdocument

Ways to retrieve the output of a generator

event.ts export interface Action { description: string; location: string; duration: number; } export interface IEvent { title: string; actions: Array<Action>; } Festival.ts import {IEvent, Action} from './interfaces/event& ...

javascripttypescriptgenerator

Update the Div content with animation on the change

I have mastered the art of refreshing a DIV element, but now I am looking to take it up a notch by incorporating an animation into the transition. The idea is that when a user approves an offer, the div containing a series of boxes should elegantly 'm ...

javascriptjqueryhtmlrefresh

A guide on integrating array map with a v-for loop in Vue

Struggling to understand how to implement a loop within another loop in Vue? This task might seem simple with React, but Vue presents its own challenges when it comes to using loops with arrays in templates/JSX. The input data follows a specific format fr ...

javascriptvue.jsjsxv-forarray.prototype.map

Access the contents of the selected cell in the MUI datagrid

When I choose a row from the datagrid, my attempt to access each cell value in that row always returns "undefined" when using selectedRowData.email. How can I correctly retrieve the data from a selected row's cells? <DataGrid checkboxSe ...

javascriptreactjsmaterial-uidatagrid

Attach onClick event when employing a higher order component

Just getting started with React and I have a question. After following some blog posts, I was able to create a page using higher order components and componentDidMount to fetch data from an API and display it. Everything works smoothly and the code looks ...

javascriptreactjshigher-order-components

Hold off on compiling the Angular directive template until the function has finished executing

I created an angular directive that dynamically displays an image on my webpage based on the value in a querystring within the URL: app.directive('myDirective', function(myService) { return { restrict: 'A', replace: ...

javascriptangularjsangularjs-scopeangular-directive