舊版瀏覽器中的本地開發
在 Angular CLI 10 或更高版本生成的應用項目中,默認是不啓用差異化加載的。ng serve,ng test和ng e2e命令只會生成一個 ES2015 版本,該版本無法在不支持該模塊的舊版瀏覽器(例如 IE 11)中運行。
要保持差異化加載的好處,更好的選擇是爲ng serve,ng e2e和ng test定義多個配置。
也就是說在本地ng serve的時候是默認不生成poltfills-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