Angular 7 project is not working in Internet Explorer 11

Question

I have done all whatever mentioned in different posts over internet but my issue still persists.

I un-commented the polyfills required for IE 9, 10, 11

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

I applied meta tag in index.html

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

But still i am getting errors while working in IE 11:

• SCRIPT438: Object doesn't support property or method 'bind' runtime.js (208,11)

• SCRIPT1010: Expected identifier polyfills.js (3846,36)

• SCRIPT1010: Expected identifier styles.js (310,24)

• SCRIPT1028: Expected identifier, string or number vendor.js (298,5)

• SCRIPT1010: Expected identifier main.js (1424,32)

EDIT 1 Here is my tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "paths": {
      "jszip": [
        "../node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
}

What should I do?

Any help would be highly appreciated.

Solution 1

I solve this problem with below 4 steps ! for you, start from step3.

1. Find polyfill.ts in your project

2. Uncommented all commented import - save

3. Install below npm

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

4. ng serve

credit : https://blog.angularindepth.com/angular-and-internet-explorer-5e59bb6fb4e9

++If you are using angular8 please refer to : https://stackoverflow.com/a/59317315/10109195

Solution 2

What about upgrading to angular v8 ?

Since the last major version the build process has been optimized for old browsers.

In Angular CLI version 8 and higher, applications are built using differential loading, a strategy where the CLI builds two separate bundles as part of your deployed application.

• The first bundle contains modern ES2015 syntax, takes advantage of built-in support in modern browsers, ships less polyfills, and results in a smaller bundle size.

• The second bundle contains code in the old ES5 syntax, along with all necessary polyfills. This results in a larger bundle size, but supports older browsers.

Development on IE

You should take a look at https://stackoverflow.com/a/56573079/4467001 to solve some issue on development mode and css since you upgraded angular to v8

Comments

[Jacopo Sciampi]

Have you look at this?: github.com/angular/angular-cli/issues/11384

[Elegie]

@TAB Thanks for your answer. If I ever find something, I'll add a comment. Cheers.

[Uland Nimblehoof]

I have similar problem with it. Tried everything. Please answer.

[TAB]

Yeah, still have same issue. Didn't found any solution yet. But as I found any workable solution, I will definitely post here.

[Cpt Kitkat]

I am still getting white screen even though I followed all the above steps.

[Ed Meacham]

Same. It's not exactly a polyfill issue for everyone. I've noticed some strange things in the router trace logs (enableTracing: true, in the router module's config)... IE seems to handle the base tag very differently than other browsers when it comes to relative pathing, and doesn't see query string params that follow the # in the url.

[Ed Meacham]

Ok, FIXED! We had to not only upgrade to A8, but then change the tsconfig (as noted in the OP--specifically, "target": "es5") and we ended up having to set the deploy-url and base-href in our build command because the base tag in the index file was not being observed for an unknown reason. (shekhargulati.com/2017/07/06/…)

[Martin Choraine]

Great ! Sorry I would have precise it. Since angular 8 you have to add some config to use IE in development mode. But you find the solution 👍

[Ed Meacham]

Yeah, our dev build was working great... the production build was the issue. Very happy to get a solution for this. Thanks again!

[TAB]

I will upgrade the app next week. And I hope, issue would be no more exists.