舊版瀏覽器中的本地開發(fā)
在 Angular CLI 10 或更高版本生成的應(yīng)用項(xiàng)目中,默認(rèn)是不啟用差異化加載的。ng serve,ng test和ng e2e命令只會(huì)生成一個(gè) ES2015 版本,該版本無法在不支持該模塊的舊版瀏覽器(例如 IE 11)中運(yùn)行。
要保持差異化加載的好處,更好的選擇是為ng serve,ng e2e和ng test定義多個(gè)配置。
也就是說在本地ng serve的時(shí)候是默認(rèn)不生成polyfills-es5.js所以本地啟動(dòng)IE空白。
直接在tsconfig.json將target改成 “es5”再重新啟動(dòng)即可
或者使用下面的方法
為 ES5 配置服務(wù)
要讓ng serve做到這一點(diǎn),就要在tsconfig.app.json后面創(chuàng)建一個(gè)新的文件tsconfig-es5.app.json,包含以下內(nèi)容。
? ? ? ? ? ? ? ? content_copy{
"extends": "./tsconfig.app.json",
"compilerOptions": {
? ? "target": "es5"
? }
}
在angular.json中,在build和serve下添加兩個(gè)新的配置節(jié),其目標(biāo)指向新的 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"
? ? }
? }
},
然后,你可以使用此配置運(yùn)行ng serve命令。務(wù)必確保將(在":build:es5"中)替換為應(yīng)用程序的實(shí)際名稱,因?yàn)樗矔?huì)出現(xiàn)在angular.json的projects中。例如,如果你的應(yīng)用程序名稱為myAngularApp則配置要變成"browserTarget": "myAngularApp:build:es5"。
? ? ? ? ? ? ? ? content_copyng serve --configuration es5
配置?test?命令
創(chuàng)建一個(gè)新的文件,在tsconfig.spec.json后面tsconfig-es5.spec.json,包含以下內(nèi)容。
? ? ? ? ? ? ? ? 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"
? ? }
? }
},
然后,你可以使用此配置運(yùn)行測試了
? ? ? ? ? ? ? ? content_copyng test --configuration es5