Issues with Angular 9 application compatibility with IE11

Question

Issues with Angular 9 application compatibility with IE11

Our Angular 9 project runs smoothly on Google Chrome and Firefox, but nothing appears on IE11. Despite trying various solutions found online and following related blogs, the issue remains unresolved.

Here is a snippet from my tsconfig.json:

{  
    // Compiler options here
}

Additionally, I have another configuration file for ES5 compatibility:

{   
    // Compiler options for ES5 target
}

Furthermore, here are the dependencies listed in package.json for reference.

{ 
    // List of dependencies
}

I also referred to this resource here without success. Oddly, there are no errors shown in the Console window of IE11 as seen in the screenshots provided.

Check out these screenshots: https://i.sstatic.net/sr97g.png, https://i.sstatic.net/SLtlc.png.

Look at this polyfills.ts file that contains crucial imports for Angular setup.

  
    // Polyfills needed for Angular application
}

---------------EDIT------------------

https://i.sstatic.net/j9mRQ.png

https://i.sstatic.net/w4CGU.png

https://i.sstatic.net/ZQCel.png

https://i.sstatic.net/pf2P9.png

angular typescript internet-explorer-11 browser-support

Answer 1

Answer №1

Have you made adjustments to the browserslist file? It is recommended to remove the not before IE 9-11. The browserslist configuration should look like this:

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, make sure 'not' is removed.

In my case, I created a new Angular 9 application and tested it successfully in IE 11. I included a new tsconfig-es5.app.json file, updated the configurations in angular.json, edited the browserslist file, and executed ng serve --configuration es5. You can view the result here. Additionally, no uncommenting was necessary in the polyfills.ts file.

This is how my tsconfig.json file looks:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

And here's a snippet from my package.json file:

{
  "name": "angular9",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    ...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.0",
    "@angular/cli": "~9.1.0",
    ...
  }
}

Answer 2

Have you made adjustments to the browserslist file? It is recommended to remove the not before IE 9-11. The browserslist configuration should look like this:

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, make sure 'not' is removed.

In my case, I created a new Angular 9 application and tested it successfully in IE 11. I included a new tsconfig-es5.app.json file, updated the configurations in angular.json, edited the browserslist file, and executed ng serve --configuration es5. You can view the result here. Additionally, no uncommenting was necessary in the polyfills.ts file.

This is how my tsconfig.json file looks:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

And here's a snippet from my package.json file:

{
  "name": "angular9",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    ...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.0",
    "@angular/cli": "~9.1.0",
    ...
  }
}

Answer 3

Answer №2

To get it to function properly on both Angular 8 and 9 versions, you need to make the following adjustments:

Update browserslist file to change from not IE 9-11 to IE 9-11
Modify tsconfig.json file by changing
```
"target": "es2015"
```
to
```
"target": "es5"
```

In most cases, these changes should be sufficient. If you encounter any errors, particularly related to complex UI/UX, consider adjusting the polyfills.ts file as well.

Uncomment // import 'classlist.js'; and // import 'web-animations-js';

Remember to run

npm install --save classlist.js web-animations-js

Answer 4

To get it to function properly on both Angular 8 and 9 versions, you need to make the following adjustments:

Update browserslist file to change from not IE 9-11 to IE 9-11
Modify tsconfig.json file by changing
```
"target": "es2015"
```
to
```
"target": "es5"
```

In most cases, these changes should be sufficient. If you encounter any errors, particularly related to complex UI/UX, consider adjusting the polyfills.ts file as well.

Uncomment // import 'classlist.js'; and // import 'web-animations-js';

Remember to run

npm install --save classlist.js web-animations-js

Answer 5

Answer №3

Kindly eliminate the following line from your polyfills.js file.

**/***************************************************************************************************
 * Add `$localize` to the global scope - required for i18n tags in Angular templates.
 */
import '@angular/localize/init';**

This adjustment will ensure compatibility with IE11 browser. Upon reviewing some documentation, it has been noted that localize may not be supported in es5.

Answer 6

Kindly eliminate the following line from your polyfills.js file.

**/***************************************************************************************************
 * Add `$localize` to the global scope - required for i18n tags in Angular templates.
 */
import '@angular/localize/init';**

This adjustment will ensure compatibility with IE11 browser. Upon reviewing some documentation, it has been noted that localize may not be supported in es5.

Answer 7

Answer №4

If the problem persists, follow these steps:

Uncomment IE11 in browserlists.ts
In tsconfig.ts, change the target to "es5" and add "es5" to the lib: "target": "es5", "lib": [ "es2018", "es5", "dom" ]

After making these changes, run ng build again before starting ng serve.

Answer 8

If the problem persists, follow these steps:

Uncomment IE11 in browserlists.ts
In tsconfig.ts, change the target to "es5" and add "es5" to the lib: "target": "es5", "lib": [ "es2018", "es5", "dom" ]

After making these changes, run ng build again before starting ng serve.

Answer 9

Answer №5

To solve compatibility issues with older versions of Internet Explorer (IE), locate the commented out import statements in your polyfills.ts file under the section

/** IE9, IE10 and IE11 requires all of the following polyfills. */

:

// import 'classlist.js';  // Run `npm install --save classlist.js`.

Make sure to uncomment the above import statement to enable your app to work properly on those specific IE browsers. Don't forget to execute the command below as well:

npm install --save classlist.js

You may also need to uncomment the following import:

// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

Remember to run the command below after uncommenting it:

npm install --save web-animations-js

If the steps above do not resolve the issue, you can try the following troubleshooting tips:

In the browserslist file, consider replacing not IE 9-11 with IE 9-11.

Additionally, in the tsconfig.json file, look for

"target": "es2015"

(or similar) and change it to

"target": "es5"

.

Answer 10

To solve compatibility issues with older versions of Internet Explorer (IE), locate the commented out import statements in your polyfills.ts file under the section

/** IE9, IE10 and IE11 requires all of the following polyfills. */

:

// import 'classlist.js';  // Run `npm install --save classlist.js`.

Make sure to uncomment the above import statement to enable your app to work properly on those specific IE browsers. Don't forget to execute the command below as well:

npm install --save classlist.js

You may also need to uncomment the following import:

// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

Remember to run the command below after uncommenting it:

npm install --save web-animations-js

If the steps above do not resolve the issue, you can try the following troubleshooting tips:

In the browserslist file, consider replacing not IE 9-11 with IE 9-11.

Additionally, in the tsconfig.json file, look for

"target": "es2015"

(or similar) and change it to

"target": "es5"

.

Answer 11

Answer №6

1. To enable ES5 browser support, add the following property in your project's angular.json file within the projects > architect > build section:

"es5BrowserSupport": true

2. Update your target from

"target": "es2015"

to

"target": "es5"

in your tsconfig.json file.

Answer 12

1. To enable ES5 browser support, add the following property in your project's angular.json file within the projects > architect > build section:

"es5BrowserSupport": true

2. Update your target from

"target": "es2015"

to

"target": "es5"

in your tsconfig.json file.

Answer 13

Answer №7

To implement the following code in your project, locate the index.html file within the head tag (projectName/src/index.html) and then restart your application by running ng serve.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer 14

To implement the following code in your project, locate the index.html file within the head tag (projectName/src/index.html) and then restart your application by running ng serve.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Issues with Angular 9 application compatibility with IE11

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Uncaught Error: Unable to access 'visit' property of null

Error in Angular compiler.js at line 2531: Multiple components found for this element, causing template parse errors

The status of the Office.js appointment remains updated even after the saveAsync callback is executed

The Select element in angular fails to choose the intended option when tested with Cypress

Enhance Your SVG Elements with Angular Tooltips

Issue with dynamic imports and lazy-loading module loadChildren in Jhipster on Angular 8, not functioning as expected

Can data from an Angular app be accessed by an external JavaScript code within the same project?

Scrolling horizontally in Ionic framework

Establish a default value for cascading Angular dropdowns

Establish a connection using Angular 4 HTTP POST to communicate with a Java REST API, as it is not permitted on the server

Tips for effectively utilizing the Ngrx navigation function

Anticipate the absence of a specific object length

Angular does not recognize the boolean variable

Ways to resolve the issue of npm being unable to globally install typescript

Angular 2 decorators grant access to private class members

The TypeScript error message reads: "You cannot assign type 'undefined' to type 'ReactElement'."

What is the best way to link multiple select tags in an HTML document?

collaborating on data within closely related components in a table display

Converting Blob to File in Electron: A step-by-step guide

Once the submit button is clicked in Angular Dev Extreme, validation processes are triggered once more