旧版浏览器中的本地开发
在 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": "<app-name>: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
网友评论