Angular applications throwing syntax errors on IE1

问题:

I have angular application which is not working on IE11 only.

I have setup 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/es7/array';
    import 'core-js/es6/regexp';
    import 'core-js/es6/map';
    import 'core-js/es6/weak-map';
    import 'core-js/es6/set';

enabled tsconfig to convert code into ES5 ,

"target": "es5" 

many time updated NPM modules.

downgraded angularCli and angular from 7 to 6

Angular CLI: 6.2.5
Node: 8.11.4
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.5
@angular-devkit/build-angular     0.8.5
@angular-devkit/build-optimizer   0.8.5
@angular-devkit/build-webpack     0.8.5
@angular-devkit/core              0.8.5
@angular-devkit/schematics        0.8.5
@angular/cdk                      7.1.0
@angular/cli                      6.2.5
@ngtools/webpack                  6.2.5
@schematics/angular               0.8.5
@schematics/update                0.8.5
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.20.2

Package.json dependencies

 "dependencies": {
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.2.15",
    "@angular/compiler": "^7.2.15",
    "@angular/core": "^7.2.15",
    "@angular/forms": "^7.2.15",
    "@angular/material": "^8.0.1",
    "@angular/platform-browser": "^7.2.15",
    "@angular/platform-browser-dynamic": "^7.2.15",
    "@angular/router": "^7.2.15",
    "@ngrx/effects": "^6.1.0",
    "@ngrx/router-store": "^6.1.0",
    "@ngrx/store": "^7.4.0",
    "angular-web-storage": "^7.0.0-beta.1",
    "bootstrap": "^4.3.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.6.9",
    "intersection-observer": "^0.5.1",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "ngrx-store-logger": "^0.2.3",
    "ngx-cookie-service": "^2.2.0",
    "ngx-logger": "^3.3.13",
    "popper.js": "^1.15.0",
    "rxjs": "~6.3.3",
    "striptags": "^3.1.1",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular/animations": "^7.2.15",
    "@angular/cli": "^7.3.9",
    "@angular/compiler-cli": "^7.2.15",
    "@angular/language-service": "^7.2.15",
    "@trv-ebus/tds": "^4.1.1",
    "@trv-ebus/tds-icons": "^2.0.5",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "file:src/external-deps/npm_modules/node-sass",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }

But In None other but IE11 gives syntax error in vendor.js and main.js.

On debugging it just point towards aapRouteModules nothing specific.

回答1:

This kind of issue usually caused by lacking of polyfills. You also need to uncomment the following polyfills in polyfills.ts:

import 'classlist.js';
import 'web-animations-js';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

Then you need to install some packages with npm:

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

And please add meta tag in the index.html: <meta http-equiv="X-UA-Compatible" content="IE=edge" />.

If you have followed the above steps and it still doesn't work, please make sure you're not using any ES6 syntax which is not supported by IE, like the arrow functions =>. You could also refer to the accepted answer in this thread, it solved the same issue as yours.