DEV Community

Cover image for Angular 8.x / 9.x & Internet Explorer Not Working. Quick Solution!
Aman
Aman

Posted on

8 3

Angular 8.x / 9.x & Internet Explorer Not Working. Quick Solution!

When it comes to web application Internet Explorer is always the bad boy (especially IE 11).

Angular 8 and above are not working on IE at all. Its really hard to test your application on IE, how the layout looks like and etc.

After you installed Angular 8 or Angular 9 when you run

ng serve

you will see a white page in Internet Explorer.

I will show you here how to fix that problem.

To get Internet Explorer working we need to do the following steps:

  • Un-comment some imports in the polyfill.ts file.
  • Install a couple of npm packages.
  • Modify the browserslist file.

Polyfill Imports

First, open the polyfills file in your IDE or text editor:
the file is found inside your project folder \src\polyfills.ts

There are two commented lines you need to un-comment:

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

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

Install npm Packages

There are some

npm install

commands in the comments. You need to run:

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

Modify browserslist File

Open the browserslist file in your IDE or text editor:
the file is found inside your project folder \browserslist

The default file looks something like the below:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

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

You need to change that last line by removing the not. After you make the changes the last line should read:

IE 9-11 # For IE 9-11 support, remove 'not'.

Run on production

ng build --prod

After building you can run:

cd .\dist\project-folder\
npx local-web-server

Run on dev

ng serve

you will still get the blank Internet Explorer. This is because ng serve doesn’t automatically generate the ES5 bundle.

Do the below quick config:

Modify tsconfig.json

You can find your tsconfig.json file in the root of your Angular Workspace. Open it up in your IDE or text editor and you will see:

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

Notice that line:

target: es2015

. You can change it to es5. It will then look like this:

"target": "es5",

Now you can run:

ng serve

Hooray! at this point IE should work.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (3)

Collapse
 
laxmanvijay profile image
laxman

Wow, thanks! This saved me.

Collapse
 
katik1408 profile image
Kartik Saxena

Still not working for me I tried everything.

Collapse
 
adithyasbhat profile image
adithyasbhat

how the angular material can be worked with old chrome and firefox browser

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more