在本週的項目中, 因爲涉及到ie兼容, 須要使用ie瀏覽器測試, 可是發現經過ng serve
啓動的項目在ie中沒法顯示, 只有一個空白的頁面, 可是ng build
的項目卻能打開, 開始的時候本身也沒多想, 一直將就着用打包的方式來調試, 仍是在潘老師找到解決辦法, 並要求去解決這個問題後纔去學習解決這個問題html
在仔細看了angular的官方文檔後, 發現angular早已替咱們考慮了這個問題, 並直接給出瞭解決辦法json
你在開發過程當中使用 TypeScript 編寫的代碼會被編譯並打包成 ES2015,這種 JavaScript 語法兼容大多數瀏覽器。 全部現代瀏覽器都支持 ES2015 和更新的版本,可是大多數狀況下,你仍然要讓用戶能從不支持它的瀏覽器中訪問你的應用。 當以老式瀏覽器爲目標時,膩子腳本(polyfills)能夠提供一些老式瀏覽器中不存在的功能,從而抹平這種差距。瀏覽器
爲了最大限度地提升兼容性,你能夠發佈一個包含全部已編譯代碼的發佈包(bundle),以及全部可能會用到的膩子腳本。用戶若是在支持大量最新 JavaScript 特性的現代瀏覽器中使用此應用,就不該該爲這些他們用不到的包帶來的額外體積付出代價。差別化加載就是解決這個問題的。Angular CLI 8 及更高版本默認就支持它。app
差別化加載是一種策略,它能讓你的應用支持多種瀏覽器,可是隻加載當前瀏覽器必須用到的代碼。 當(默認)啓用了差別化加載時,CLI 會構建出兩個單獨的包,做爲你要發佈的應用的一部分。ide
- 第一個包是使用現代的 ES2015 語法,它能發揮現代瀏覽器內置支持的優點,發佈更少的膩子腳本,所以打包尺寸更小。
- 第二個包使用老式的 ES5 語法,包含全部必要的膩子腳本。其打包尺寸更大,可是支持老式瀏覽器。
咱們能夠看到一個全新得angular項目打包後的目錄以下:學習
<!--index.html--> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> <script src="runtime-es2015.js" type="module"></script> <script src="runtime-es5.js" nomodule defer></script> <script src="polyfills-es5.js" nomodule defer></script> <script src="polyfills-es2015.js" type="module"></script> <script src="styles-es2015.js" type="module"></script> <script src="styles-es5.js" nomodule defer></script> <script src="vendor-es2015.js" type="module"></script> <script src="vendor-es5.js" nomodule defer></script> <script src="main-es2015.js" type="module"></script> <script src="main-es5.js" nomodule defer></script> </body> </html>
每一個 script 標籤都有一個type="module"
或nomodule
屬性。原生支持 ES 模塊的瀏覽器只會加載帶有該類型屬性的腳本,而忽略那些帶有nomodule
屬性的腳本。而老式瀏覽器只會加載帶有nomodule
屬性的腳本,而忽略那些 type 爲module
的腳本標籤。測試
須要注意的是有的瀏覽器所有代碼都會下載, 但只會根據上述屬性執行適當的腳本。
Angular CLI 第 8 版及更高版本已默認支持構建差別化加載的發佈包。工做空間中的每一個應用項目,均可以根據其中的browserslist
和tsconfig.json
配置文件來決定發佈包的構建方式。ui
更多相關內容,能夠查看官方文檔es5
看到這裏, 仍是沒說爲何ng serve
不行, 緣由就是:spa
在 Angular CLI 版本 8 和更高版本中,默認狀況下會爲ng build
命令啓用差別化加載。可是,ng serve
,ng test
和ng e2e
命令只會生成一個 ES2015 版本
因此咱們解決這個問題能夠經過兩種方式:
在tsconfig.json
旁新建一個tsconfig.es5.json
{ "extends": "./tsconfig.json", "compilerOptions": { "target": "es5" } }
angular.json
中的build
下的configurations
添加配置"es5": { "tsConfig": "./tsconfig.es5.json" }
angular.json
中的server
下的configurations
添加配置"es5": { "browserTarget": "AppName:build:es5" }
注意
:記得修改AppName
爲你的項目得名字, 好比若個人項目爲angular
則爲:
"es5": { "browserTarget": "angular:build:es5" }
而後就可使用下面命令啓動項目了
// 或者 ng serve -c es5 ng serve --configuration es5