ng serve支持ie10

時間 2020-04-19

標籤 serve 支持 ie10 欄目瀏覽器简体版

原文原文鏈接

在本週的項目中, 因爲涉及到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項目打包後的目錄以下:
學習

如何知道使用那些js代碼呢

<!--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支持ie10

看到這裏, 仍是沒說爲何ng serve不行, 緣由就是:spa

在 Angular CLI 版本 8 和更高版本中，默認狀況下會爲 ng build命令啓用差別化加載。可是， ng serve， ng test和 ng e2e命令只會生成一個 ES2015 版本

因此咱們解決這個問題能夠經過兩種方式:

直接修改ts編譯爲js時的版本, 讓他變成支持ie的es5, 不過這會致使禁用差別化加載, 這方面的知識請查看差別化加載的官方文檔
爲ng serve 進行單獨的配置

新建一個tsconfig

在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

參考文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。