IE11中的Angular 10错误

在Internet Explorer 11（IE11）中使用Angular 10可能会遇到一些兼容性问题，因为IE11对现代JavaScript特性的支持有限。以下是一些常见的问题及其解决方案：

基础概念

Angular: 是一个开源的前端框架，用于构建单页应用程序。
IE11: 是微软推出的最后一个版本的Internet Explorer浏览器，对ES6及更高版本的JavaScript支持不完整。

常见错误及原因

语法错误: IE11不支持ES6+的语法，如箭头函数、let/const等。
Promise未定义: IE11没有内置Promise对象。
模块加载错误: Angular应用的模块加载机制可能与IE11不兼容。

解决方案

1. 配置Angular项目以支持IE11

在tsconfig.json文件中，确保目标设置为es5：

{
  "compilerOptions": {
    "target": "es5",
    ...
  }
}

2. 引入Polyfills

Angular CLI项目通常包含一个polyfills.ts文件，用于引入必要的polyfills以支持旧版浏览器。确保以下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/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';  // Included with Angular CLI.

3. 使用Babel进行转译

如果项目中有自定义的JavaScript代码使用了ES6+特性，可以使用Babel进行转译：

npm install --save-dev @babel/core @babel/preset-env babel-loader

然后在webpack.config.js中配置Babel：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

4. 检查Angular应用的构建配置

确保Angular CLI的构建命令包含了必要的polyfills：

ng build --prod --base-href ./ --output-hashing all --source-map=false --optimization=true --vendor-chunk=true --common-chunk=true --build-optimizer=true