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.

You bright future is waiting 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