在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節(jié)點中自己的主工程節(jié)點，舉例,主工程名為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節(jié)點:

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

配置e2e節(jié)點:

"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節(jié)點添加require('karma-ie-launcher')以引入IE插件。

• 在browsers節(jié)點中添加IE => browsers:['Chrome', 'IE'],或者將Chrome改為IE,運行完成后復原即可

• 執(zhí)行命令安裝 npm install karma-ie-launcher --save-dev

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

  在compilerOptions節(jié)點中添加"target": "es5",如果是修改的配置文件,則建議運行完成后進行復原。

• 啟動測試指定多瀏覽器的情況下，開啟測試會默認打開多個指定的瀏覽器,也可以添加命令限定使用的瀏覽器, 舉例: ng test sr2-core --code--coverage --browsers IE