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

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

修改主工程下默認(rèn)的browserlist文件配置,移除下行代碼開(kāi)頭的not

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

修改主工程下src目錄下的膩?zhàn)幽_本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下只能識(shí)別es5的代碼,這里覆蓋了默認(rèn)的es2015屬性
  }
}

在工程下找到angular.json能庆，進(jìn)行配置

找到projects節(jié)點(diǎn)中自己的主工程節(jié)點(diǎn)，舉例,主工程名為mainpage脚线，添加es5的配置項(xiàng)配置如下:

"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é)點(diǎn):

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

配置e2e節(jié)點(diǎn):

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

實(shí)際修改時(shí)搁胆，將mainpage修改為自己的主工程名即可。

配置運(yùn)行命令或者直接運(yùn)行ng serve --configuration es5即可邮绿。

在IE下(某些必要情況下)進(jìn)行單體測(cè)試以及覆蓋率生成

如果代碼中用到了只有IE才有的組件,比如ActiveXObject,那么要達(dá)到覆蓋率要求渠旁，就必須在IE下進(jìn)行單體測(cè)試。

步驟如下：

• 在當(dāng)前工程目錄下找到karma.conf.js配置文件,在plugins節(jié)點(diǎn)添加require('karma-ie-launcher')以引入IE插件船逮。

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

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

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

  在compilerOptions節(jié)點(diǎn)中添加"target": "es5",如果是修改的配置文件,則建議運(yùn)行完成后進(jìn)行復(fù)原顾腊。

• 啟動(dòng)測(cè)試指定多瀏覽器的情況下，開(kāi)啟測(cè)試會(huì)默認(rèn)打開(kāi)多個(gè)指定的瀏覽器,也可以添加命令限定使用的瀏覽器, 舉例: ng test sr2-core --code--coverage --browsers IE