Search code examples
angularinternet-explorerangular8polyfills

Problem with angular 8 project on Internet Explorer


The project is not working on IE.

My dependencies are:

package.json

"dependencies": {
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "^8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/material-moment-adapter": "^8.2.3",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/router": "^8.2.14",
    "@browninglogic/ng-modal": "^4.0.3",
    "@code-art/angular-globalize": "^8.0.1",
    "cldr": "^5.5.4",
    "cldr-data": "^36.0.0",
    "globalize": "^1.4.2",
    "hammerjs": "^2.0.8",
    "ng2-loading-spinner": "^1.3.0",
    "ngx-mat-select-search": "^2.1.2",
    "ngx-perfect-scrollbar": "^8.0.0",
    "ngx-ui-loader": "^8.0.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.11.1",
    "zone.js": "~0.9.1"
  },

** tsconfig.json** - already tried to change the target to es5 from es2015, but didn't work.

 "target": "es5"

polyfills.ts - also tried to add this, but didn't work

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

Any ideas are appreciated. Thanks!


Solution

  • I created and a new ts file called zone-flags.ts in the src folder and then import it in polyfill.ts

    (window as any)._Zone_enable_cross_context_check = true;
    

    polyfill.ts - changed it like this helped me:

     import 'classlist.js';  // Run `npm i --save classlist.js`.
     import 'web-animations-js';  // Run `npm i --save web-animations-js`.
     import './zone-flags.ts';
     import 'zone.js/dist/zone';  // Included with Angular CLI.
     import 'url-search-params-polyfill'; // Run npm i url-search-params-polyfill
    

    and import the zone-flags.ts in

      "files": [
        "src/main.ts",
        "src/polyfills.ts",
        "src/zone-flags.ts"
      ]
    

    browserslist

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