IE11下运行angular项目的配置

在index.html中添加<meta>属性

meta http-equiv="X-UA-Compatible" content="IE=edge"/>

修改主工程下默认的browserlist文件配置,移除下行代码开头的not

IE 9-11 # For IE 9-11 support, remove 'not'.

修改主工程下src目录下的腻子脚本polyfills.ts

移除下列代码的注释:

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.
/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

安装npm包:

npm install --save classlist.js

npm install --save web-animations-js

在主工程目录下添加tsconfig-es5.app.json文件，继承同目录的tsconfig.app.json文件,配置如下:

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "target": "es5" // ie下只能识别es5的代码,这里覆盖了默认的es2015属性
  }
}

在工程下找到angular.json，进行配置

找到projects节点中自己的主工程节点，举例,主工程名为mainpage，添加es5的配置项配置如下:

"mainpage": {
  ...
  "architect": {
    "build": {
      "options": {...},
      "configurations": {
        "production": {...},
        "es5": {
              "fileReplacements": [
                {
                  "replace": "projects/mainpage/src/environments/environment.ts",
                  "with": "projects/mainpage/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "tsConfig": "projects/mainpage/tsconfig-es5.app.json"
            }
      }
    }
  }
  ...
}

配置serve节点:

"mainpage": {
    ...,
    "architect": {
        "build": { ... },
        "serve": {
            "builder": { ... },
            "options": { ... },
            "configurations": { ... },
            "es5": {
              "browserTarget": "mainpage:build:es5",
              "proxyConfig": "proxy.conf.json" // 代理配置,有跨域问题时需要配置
            }
        },
    }
 ...
}

配置e2e节点:

"mainpage": {
    ...,
    "architect": {
        "build": { ... },
        "serve": { ... },
         ...,
         "e2e": {
             "builder": { ... },
         "options": { ... },
            "configurations": {
                "production": ...,
                "es5": {
                "devServerTarget": "mainpage:serve:es5"
              }
            }         
          }
        },
    }
 ...
}

实际修改时，将mainpage修改为自己的主工程名即可。

配置运行命令或者直接运行ng serve --configuration es5即可。

在IE下(某些必要情况下)进行单体测试以及覆盖率生成

如果代码中用到了只有IE才有的组件,比如ActiveXObject,那么要达到覆盖率要求，就必须在IE下进行单体测试。

步骤如下：

• 在当前工程目录下找到karma.conf.js配置文件,在plugins节点添加require('karma-ie-launcher')以引入IE插件。

• 在browsers节点中添加IE => browsers:['Chrome', 'IE'],或者将Chrome改为IE,运行完成后复原即可

• 执行命令安装 npm install karma-ie-launcher --save-dev

• 在当前工程目录下找到tsconfig.spec.json配置文件,或者新建tsconfig-ie.spec.json,

  在compilerOptions节点中添加"target": "es5",如果是修改的配置文件,则建议运行完成后进行复原。

• 启动测试指定多浏览器的情况下，开启测试会默认打开多个指定的浏览器,也可以添加命令限定使用的浏览器, 举例: ng test sr2-core --code--coverage --browsers IE