Angular8兼容ie11的详细步骤

1. 新建.browserslist文件内容

内容如下：

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-10 # For IE 9-10 support, remove 'not'.
IE 11

2. 修改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 'babel-polyfill';
import 'core-js/shim';
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';
/** 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 default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.
/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import '@webcomponents/webcomponentsjs/webcomponents-bundle';
import '@webcomponents/webcomponentsjs/webcomponents-loader';
3. 在main.js顶部再次加载babel-polyfill
import 'babel-polyfill';

3. 修改main.ts

在main.ts顶部加上以下代码

import 'babel-polyfill';

4.package.json新增依赖

"dependencies": {
    "@webcomponents/webcomponentsjs": "^2.5.0",
    "web-animations-js": "^2.3.2",
    "classlist.js": "^1.1.20150312",
    "babel-polyfill": "^6.26.0"
}

5.修改tsconfig.json文件

以下是我的配置，每个项目的配置不一样，主要是把target的值改为es5

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5", // 重点
    "allowSyntheticDefaultImports": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "paths": {
      "crypto": [
        "node_modules/crypto-js"
      ]
    },
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

6. IE11开发环境打开页面后刷新报错原因

是 webpack-dev-server 版本的原因，和angular无关，只是开发环境会出现这个问题，生产环境不会出现这个问题，可以 webpack-dev-server 改成2.11.1版本并设置 ng serve --watch 修复此问题。

Published webpack-dev-server@2.11.1 with the fix.
package.json 加--watch "start": "ng serve --watch --proxy-config proxy.config.json --host=0.0.0.0 --port=4200 ",

7. ERROR Error: Uncaught(in promise):Error:SecurityError

7.1 解决方法1：配置ie浏览器

这很好用，但是可以破坏公司型局域网上的某些类型的通过验证。除了确保Internet区域不是本地主机（如上述答案）外，请确保如果使用https，则应使用wss。在其他浏览器中这不是问题，但IE有点挑剔。 stackoverflow.com/questions/2…