IE11下运行angular项目的配置

1. 在index.html中添加属性

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

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

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

3. 修改主工程下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

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

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

5. 在工程下找到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修改为自己的主工程名即可。

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

7. 在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