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.

Answer 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

Answer 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