Running Angular 10 in Internet Explorer 11

Are you worried that new angular 10 project is not running in “IE11” even though you enable the given polyfills by angular team? Then please read this article.

Angular 10 default tsconfig target is es2015

Since Angular 10 apps comes with target compiled version as es2015 in tsconfig.json file.

Enabling IE 11 Polyfills.js

Go to polyfills.js and un-comment below import for IE11.

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

Install node package:

npm install --save classlist.js

Importing core-js in polyfills.js

Symbols, promise etc. will not work in IE11 unless you put core-js in the polyfills. Therefore, please import core-js in polyfills.

import 'core-js'

Then install core-js

Install node package

npm i core-js

Option-1: Converting compiler option to es5 in tsconfig

If your primary client is IE11. Then the simple option is to go to tsconfig.json at the root of your project and change the target value to es5

This option will always create bundle in IE compatible format that works both

Option-2: Maintaining es5 separate tsconfig

If you want to maintain both version es2015 and es5 then follow below:

1. Create new tsconfig-es5.app.json

1. Add target es5

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "es5"
  }
}

1. Go to angular.json under projects:<YourAppName>:architect:build:configurations add

 "es5": {
            "tsConfig": "./tsconfig-es5.app.json"
        }

1. And projects:<YourAppName>:architect:serve:configurations add 👉 change yourappname with your project name.

1. Add below scripts in package.json

"build:ie":"ng build --configuration es5",
"build:ie:prod":"ng build --configuration es5 --prod",
"start:ie":"ng serve --configuration es5"

Now in order to open project in IE run npm run start:ie

Now in order to build project in IE compatible run npm run build:ie

Now in order to build project in IE compatible Prod Mode run npm run build:ie:prod

Reference

How to run Angular 10 in IE

Become full stack developer 💻

If you want to become full stack developer and grow your carrier as new software developer or Lead Developer/Architect. Consider subscribing to our full stack development training programs. We have All-Access Monthly membership plans and you will get unlimited access to all of our video courses, slides, source code & Monthly video calls.

• Please subscribe to All-Access Membership PRO plan to access current and future angular, node.js and related courses.
• Please subscribe to All-Access Membership ELITE plan to get everything from PRO plan. Additionally, you will get access to monthly live Q&A video call with Rupesh and you can ask doubts/questions and get more help, tips and tricks.

Your bright future is awaiting for you so visit today FullstackMaster and allow me to help you to board on your dream software company as a Developer,Architect or Lead Engineer role.

💖 Say 👋 to me!

Rupesh Tiwari

www.rupeshtiwari.com

✉️ Email Rupesh

Founder of Fullstack Master