Angular 6 应用程序无法在 IE < 11 中运行

Question

我的 Angular 应用程序无法在低于 11 的 IE 中运行，但之前它甚至无法在 IE 11 中运行，但在取消注释 polyfills.ts 中的一些导入后它可以运行，但问题在较低版本中仍然存在。

分别是我的 polyfills.ts、package.json 和浏览器控制台错误

polyfills.ts

/**
* This file includes polyfills needed by Angular and is loaded before the 
app.
You can add your own extra polyfills to this file.

This file is divided into 2 sections:
1. Browser polyfills. These are applied before loading ZoneJS and are sorted 
 by browsers.
2. Application imports. Files imported after ZoneJS that should be loaded 
before your main file.
*
* The current setup is for so-called "evergreen" browsers; the last versions 
of 
browsers that
automatically update themselves. This includes Safari >= 10, Chrome >= 55 
(including Opera),
Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
/**************
BROWSER POLYFILLS
/

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

import 'core-js/es6/array';
import 'core-js/es7/array';


/* IE10 and IE11 requires the following for NgClass support on SVG elements /
import 'classlist.js';  // Run `npm install --save classlist.js`.

/* IE10 and IE11 requires the following for the Reflect API. /
import 'core-js/es6/reflect';


/* Evergreen browsers require these. */
// Used for reflect-metadata in JIT. If you use AOT (and only Angular 
decorators), you can remove.
import 'core-js/es7/reflect'; 


/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web- 
animation
*/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.   



/*************************************
 * Zone JS is required by Angular itself.
/
import 'zone.js/dist/zone';  // Included with Angular CLI.

import 'hammerjs/hammer';


/***********************************************************************
APPLICATION IMPORTS
/

/**
* Date, currency, decimal and percent pipes.
Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
/
// import 'intl';  // Run `npm install --save intl`.
/**
* Need to import at least one locale-data with intl.
*/
// import 'intl/locale-data/jsonp/en';
import 'es5-shim';
// (window as any).global = window ;

包.json

{
"name": "material",
"version": "1.0.0",
"license": "MIT",
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "start-proxy": "ng serve --host 0.0.0.0 --proxy-config proxy.config.json",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
} ,
"private": true,
"dependencies": {
  "@angular-devkit/core": "0.6.3",
  "@angular/animations": "6.0.3",
  "@angular/cdk": "^6.1.0",
  "@angular/common": "6.0.3",
  "@angular/compiler": "6.0.3",
  "@angular/core": "6.0.3",
  "@angular/flex-layout": "2.0.0-beta.10-4905443",
  "@angular/forms": "6.0.3",
  "@angular/http": "6.0.3",
  "@angular/material": "^6.1.0",
  "@angular/platform-browser": "6.0.3",
  "@angular/platform-browser-dynamic": "6.0.3",
  "@angular/router": "6.0.3",
  "@swimlane/ngx-charts": "^7.0.1",
  "@swimlane/ngx-datatable": "^11.1.5",
  "amazon-cognito-identity-js": "^2.0.12",
  "angular-calendar": "^0.22.1",
  "aws-sdk": "^2.266.1",
  "chartist": "^0.11.0",
  "classlist.js": "^1.1.20150312",
  "core-js": "^2.4.1",
  "d3": "^4.8.0",
  "es5-shim": "^4.5.10",
  "hammerjs": "^2.0.8",
  "intl": "^1.2.5",
  "jquery": "^3.2.1",
  "moment": "^2.20.0",
  "ng-chartist": "1.1.1",
  "ng2-charts": "1.6.0",
  "ng2-dragula": "1.5.0",
  "ng2-file-upload": "1.3.0",
  "ng2-smart-table": "1.2.2",
  "ng2-validation": "^4.2.0",
  "ngx-perfect-scrollbar": "^5.0.0",
  "ngx-quill": "^3.1.0",
  "rxjs": "^6.2.0",
  "rxjs-compat": "^6.2.0",
  "rxjs-tslint": "^0.1.4",
  "web-animations-js": "^2.3.1",
  "zone.js": "^0.8.26"
  },
  "devDependencies": {
  "@angular/cli": "6.0.5",
  "@angular/compiler-cli": "6.0.3",
  "@angular/language-service": "6.0.3",
  "@types/chartist": "^0.9.37",
  "@types/jasmine": "~2.5.53",
  "@types/jasminewd2": "~2.0.2",
  "@types/jquery": "^3.2.5",
  "@types/node": "~6.0.60",
  "codelyzer": "~3.2.0",
  "jasmine-core": "~2.6.2",
  "jasmine-spec-reporter": "~4.1.0",
  "karma": "~1.7.0",
  "karma-chrome-launcher": "~2.1.1",
  "karma-cli": "~1.0.1",
  "karma-coverage-istanbul-reporter": "^1.2.1",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "~5.1.2",
  "ts-node": "~3.2.0",
  "tslint": "~5.7.0",
  "typescript": "2.7.2",
  "@angular-devkit/build-angular": "~0.6.3"
  }
  }

IE 10 中的控制台错误

对于 IE 9 控制台是空的。

请提出一个可能的解决方案。

Answer 1

Angular 6 也面临同样的问题。仅取消注释 Pollyfills 根本不起作用。除了添加元标记 <meta http-equiv="X-UA-Compatible" content="IE=edge" > 到您的 index.html 文件。