ng serve 在IE 空白页面

Angular 与 IE浏览器

ng serve支持ie10

旧版浏览器中的本地开发

旧版浏览器中的本地开发

在 Angular CLI 10 或更高版本生成的应用项目中，默认是不启用差异化加载的。ng serve，ng test和ng e2e命令只会生成一个 ES2015 版本，该版本无法在不支持该模块的旧版浏览器（例如 IE 11）中运行。

要保持差异化加载的好处，更好的选择是为ng serve，ng e2e和ng test定义多个配置。

也就是说在本地ng serve的时候是默认不生成polyfills-es5.js所以本地启动IE空白。

直接在tsconfig.json将target改成 “es5”再重新启动即可

或者使用下面的方法

为 ES5 配置服务

要让ng serve做到这一点，就要在tsconfig.app.json后面创建一个新的文件tsconfig-es5.app.json，包含以下内容。

                content_copy{

"extends": "./tsconfig.app.json",

"compilerOptions": {

    "target": "es5"

  }

}

在angular.json中，在build和serve下添加两个新的配置节，其目标指向新的 TypeScript 配置。

                content_copy"build": {

  "builder": "@angular-devkit/build-angular:browser",

  "options": {

      ...

  },

  "configurations": {

    "production": {

        ...

    },

    "es5": {

      "tsConfig": "./tsconfig-es5.app.json"

    }

  }

},

"serve": {

  "builder": "@angular-devkit/build-angular:dev-server",

  "options": {

      ...

  },

  "configurations": {

    "production": {

    ...

    },

    "es5": {

      "browserTarget": ":build:es5"

    }

  }

},

然后，你可以使用此配置运行ng serve命令。务必确保将（在":build:es5"中）替换为应用程序的实际名称，因为它也会出现在angular.json的projects中。例如，如果你的应用程序名称为myAngularApp则配置要变成"browserTarget": "myAngularApp:build:es5"。

                content_copyng serve --configuration es5

配置 test 命令

创建一个新的文件，在tsconfig.spec.json后面tsconfig-es5.spec.json，包含以下内容。

                content_copy{

"extends": "./tsconfig.spec.json",

"compilerOptions": {

    "target": "es5"

  }

}

                content_copy"test": {

  "builder": "@angular-devkit/build-angular:karma",

  "options": {

      ...

  },

  "configurations": {

    "es5": {

      "tsConfig": "./tsconfig-es5.spec.json"

    }

  }

},

然后，你可以使用此配置运行测试了

                content_copyng test --configuration es5