Making your Angular application compatible with Internet Explorer 11

Angular : Making your application compatible with Internet Explorer 11

 We know that Microsoft’s legacy web browser Internet Explorer is being phased out. However, in some organizations Internet Explorer is still used and they are still in process of moving to recent browsers.

 Latest versions of angular is only supported in evergreen browsers like Chrome, Firefox, Safari, Edge.
 So, today I am sharing step wise details, with which we can make our application to be supported in Internet Explorer 11. Let’s get started.
 

•  Babel dependencies

Babel is an open-source JS transcompiler (transpiler) which can convert the code developed with latest versions of ECMAScript to a backward compatible version of JS. It allows the Browsers with old JS engines to run the code.

 We will need babel-core, babel preset-env, babel-loader and babel-polyfill. You can check, if your project already contains these libraries by running the below commands in terminal from the root of project directory. If installed, it will return versions.

 

npm view @babel/core version

npm view @babel/preset-env version

npm view babel-loader version

npm view @babel/polyfill version

 

If the above dependencies are not installed, use below commands to install them:

 npm install --save @babel/core version

npm install --save @babel/preset-env version 

npm install --save babel-loader

npm install --save @babel/preset-env version

 

• core-js dependency

 Core-js provides polyfills fo ECMAScript’s latest versions. Polyfills are codes that are used to implement the features which are not supported natively by the Browser by default, owing to old/ outdated JS engines.

            npm install --save  core-js

 

•  Polyfill.js file

 Add the below lines at the top of polyfill.js file in you project

import "@babel/polyfill";

import 'core-js/stable';

import 'regenerator-runtime/runtime';

 Example:

polyfill.js 

import "@babel/polyfill";

import 'core-js/stable';

import 'regenerator-runtime/runtime';

 

import 'zone.js/dist/zone';

import '@angular/localize/init';

require('../manifest.webapp');

 

• webpack.common.js

Since we use Webpack as module bundler for our project, add lines

{

                test: /\.js/,

                use: {

                  loader: 'babel-loader',

                  options: {

                    "presets": [

                      [

                        "@babel/preset-env",

                        {

                          "targets": {

                            "firefox": "60",

                            "ie": "11"

                          },

                          "useBuiltIns": "entry",

                          "corejs": 3

                        }

                      ]

                    ]

                  }

                },

                exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,

             },

Below these lines:

            {

                test: /manifest.webapp$/,

                loader: 'file-loader',

                options: {

                    name: 'manifest.webapp'

                }

            }

  

• Build & Run

 In tsconfig.json file check under compilerOptions and change target to es5 

{

  "compilerOptions": {

    "target": "es5",

    "module": "esnext",

    "moduleResolution": "node",

"sourceMap": true,

...

                            .. 

}

  

Build and Run the project. Cheers! 🍻

 

Please comment in case you face any issues, I will be happy to help. ✌