Angular应用程序仅在IE11上引发语法错误 [英] Angular applications throwing syntax errors on IE11 only

问题描述

我有角度应用程序，仅在IE11上不起作用.

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

我已经设置了polyfills

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';

启用tsconfig将代码转换为ES5

enabled tsconfig to convert code into ES5 ,

"target": "es5" 

许多时间更新了NPM模块.

many time updated NPM modules.

将angularCli和angularCli从7降级到6

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依赖项

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"
  }

但是在其他方面，IE11却给出了syntax error in vendor.js and main.js.

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

在调试时，它仅指向没有具体说明的aapRouteModules.

On debugging it just point towards aapRouteModules nothing specific.

推荐答案

这种问题通常是由于缺少polyfills引起的.您还需要在 polyfills.ts 中取消注释以下polyfill:

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';

然后您需要使用npm安装一些软件包:

Then you need to install some packages with npm:

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

然后请在 index.html 中添加元标记:<meta http-equiv="X-UA-Compatible" content="IE=edge" />.

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

如果已按照上述步骤操作，但仍然无法正常工作，请确保未使用IE不支持的任何ES6语法，例如箭头功能=>.您还可以在此线程中引用接受的答案. >，它解决了与您相同的问题.

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.

这篇关于Angular应用程序仅在IE11上引发语法错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！