[譯文]深刻探索Angular 10

原文：Angular 10 in depth

做者：Flavio Copes

譯者：曉編

Angular的最新版本Angular 10剛發佈了，咱們看看有什麼新特性！本文會詳細講新版本里全部值得一提的新特性，若是你想快速預覽有哪些內容，能夠前往Angular官方博客查看。

Angular 10 在 Angular 9 發佈以後4個月就發了，相隔時間這麼短，固然沒有太多的變化，但這個版本仍是有一些值得一提的新特性，以及修復了不少缺陷。順便一提，Angular團隊想要每一年發佈2個大版本，因此Angular 11應該會在今年秋季發佈。

支持 TypeScript 3.9.x

做爲一個熱愛TypeScript的人，我認爲這個版本最喜聞樂見的特性就是支持TypeScript 3.9.x！另外一方面Angular 10放棄了對TS 3.六、3.7和 3.8的支持，但願不會成爲你的障礙。基於編譯CLI的升級和對TS3.9的支持，Angular 10 的類型檢查比以往的版本都要快，這對於大多數項目來講是個好消息，尤爲是大型項目。

除此以外，Angular 10還升級到了 TSLib 2.0。TSLib簡單地說就是一個提供TypeScript運行時支持方法的官方庫，它要結合「tsconfig.json」裏的importHelpers標記生效，當importHelpers開啓的時候，編譯器能夠生成更緊湊、更具可讀性的代碼。總之不用擔憂，TSLib沒有太大變化。

可選的嚴格設置

嚴格模式爲贏！

Angular 10 的嚴格模式使得咱們能夠在建立時就獲得一個嚴格的項目，這是很好的作法，值得用在全部新項目上。運行下面的命名能夠建立一個嚴格設置的項目：

ng new --strict複製代碼

它可讓你更快地檢測到問題的存在（在構建時發現問題總比運行時發現問題好，對吧）。這個新的option：

1. 開啓TypeScript的嚴格模式（建議老是開啓！），以及嚴格的Angular模板類型檢測；
2. 大大下降了「angular.json」的空間預算，鼓勵新用戶關注應用打包的大小；
3. 強制使用更嚴格的TSLint配置，禁止使用「any」類型（「no-any」爲true），還開啓了codelyzer提供的幾個有趣的規則。雖然這樣作很嚴格，但TSLint可讓你走得更遠。

我認爲這個新的「strict」選項很棒，有點小惋惜它只是個可選項而不是個默認選項。我的認爲嚴格意味着更安全。若是你要建立新項目，建議使用嚴格模式哦。

新的TypeScript配置結構

新版本提供的默認TS配置有點變化，如今是同時提供了 「tsconfig.base.json」 、 「tsconfig.json」、「tsconfig.app.json」 和「tsconfig.spec.json」。

爲何要有這些配置文件？這是爲了更好地支持IDE和構建工具查找類型和編譯配置。新版裏面，「tsconfig.json」 只包含TypeScript項目引用，這樣能夠提高編譯時性能，並且更嚴格地隔離項目的不一樣部分： 「tsconfig.app.json」管應用代碼；「tsconfig.spec.json」管測試；「tsconfig.base.json」 裏面的TypeScript配置只配置TypeScript編譯器和Angular編譯器選項，沒有配置指定/排除編譯哪些文件。那指定/排除編譯哪些文件在哪裏配置呢？答案是在「tsconfig.app.json」文件裏面。

若是你現有的項目裏沒有用這個配置結構，最好檢查下你的TypeScript配置以便保持一致。

NGCC

首先確保你的package.son文件裏有postinstall腳本，在安裝後執行NGCC。

在新版本里面，NGCC的可恢復性更強。放在之前，若是NGCC的某個工做進程崩了它不必定能恢復，如今應該沒有這個問題了。此外NGCC還作了一些優化，包括性能相關的。

新的默認瀏覽器配置

Web瀏覽器發展迅速，Angular順應潮流也更新了browserslist文件（.browserslistrc）。但正如官方博客裏解釋的那樣，新配置帶來了一個反作用，就是新項目默認禁用ES5構建。固然，如今生產ES5的代碼已經沒多少意義了，現代Web瀏覽器都至少支持ES2015了。若是你還在用IE瀏覽器，那就是時候告別過去了。

若是要獲取具體支持的Web瀏覽器，能夠在你的項目裏執行下面的命令：

npx browserslist複製代碼

它會基於根目錄下的 「.browserslistrc」 文件輸出結果。

Bazel

一個使人可惜的消息：Angular Bazel已經離開Angular實驗室了，因此Angular項目基本上不會再支持Bazel，Bazel不再是Angular CLI的默認構建工具了。

@angular-devkit/build-angular 0.1000.0)

雖然這個包的命名很粗暴，但它包含了Angular應用構建的重要部分。最新版本的帶來了幾個很酷的特性：

1. 若是你用SASS，build-angular會從新定義資源的相對路徑。以前的版本里，在樣式文件裏引用或導入 url(./foo.png) 這樣的路徑，都會保留準確的URL，當引入的樣式文件不在同一個目錄下的時候就會崩掉。如今全部使用相對資源的路徑都能找到了。
2. build-angular能夠去掉Webpack沒法處理的重複模塊，這是經過自定義Webpack解析插件實現的。

更多

增量式模板類型檢查

新版的編譯器CLI能夠實現增量式模板類型檢查。

CanLoad

之前，CanLoad guard 只能返回boolean值，如今能夠返回 UrlTree 類型的值，匹配CanActivate 守衛的行爲。注意，這不會影響預加載。

I18N/L10N

之前本地只能支持一個翻譯文件。如今本地能夠指定多個文件了，而後經過message id來合併。

Service Workers

默認的SwRegistrationStrategy有所優化。避免了以前可能會出現的 Service Worker從未註冊的狀況（好比有interval或遞歸timeout這樣的長時間運行任務存在時）。

Angular Material

Angular Material 10 也跟着發佈了，變化挺多的

大量的缺陷修復

Angular團隊投入了大量的時間和精力去修復了積壓的bug，解決了超過700個issue。

廢棄特性

Angular打包格式再也不支持ESM5/FESM5，由於構建過程的最後都會降級爲ES5。若是你不用Angular CLI打包，你要本身想辦法把Angular代碼降級到es5。

IE 九、IE 10和移動端IE瀏覽器都不支持了。

以及一些廢棄的元素，具體看官網博客。

不帶Angular裝飾器的class再也不支持Angular的特性

直到Angular 9，你均可以在沒有使用裝飾器（好比 @Component，@Derective等）的類裏面使用Angular的特性。Angular 10裏面不行了，你必須加裝飾器。若是你有用到組件繼承，父子組件類裏的其中一個沒有加裝飾器，就會有問題。

爲何要強制變動？簡單來說，Ivy編譯器須要裝飾器。

若是沒有裝飾器，Angular的編譯器就不會添加依賴注入的額外代碼。

若是父組件缺乏了裝飾器，那子類就會繼承父類的constructor，但編譯器不會生成對應的constructor信息（由於沒裝飾）。當Angular試圖建立這個子類時，就沒有正確的信息去建立了。在View引擎裏面，編譯器能夠在全局範圍裏查找缺失的數據，但Ivy編譯器會單獨處理每一個指令，這意味着更快的編譯速度，但就無法像之前那樣自動找到缺失的constructor信息了，只有顯式添加裝飾器才能提供這個信息。

若是子類缺乏了裝飾器，那它就會繼承父類可是沒有本身的裝飾器，編譯器也無法知道這個類是個@Derective仍是個@Component，因此無法生成對應的指令信息。

這個變動帶來的好處就是加強了Angular世界的一致性。若是你想用Angular特性，那就加上Angular裝飾器。

ModuleWithProviders強制使用泛型

之前ModuleWithProviders也接受泛型，但不是強制的。NG 10裏面，泛型參數是必需的，這樣有利於類型安全。若是你遇到第三方庫的報錯：

error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).複製代碼

建議聯繫做者修復，由於NGCC也無法處理。也能夠先把skipLibChecks設爲 false來跳過。

其餘重大變動

• Resolver：返回EMPTY的會取消導航，若是你想讓導航順利完成，必須保證resolver有返回值。
• Service worker：依賴不一樣header的資源的Service worker實現跟以前不同了，不一樣的header會被忽略。建建議避免緩存這樣的資源，可能會引發user agent不可預測的行爲。由此，即便資源的header不用也能夠檢。緩存匹配選項能夠在VGSW的配置文件裏面配置。
• 屬性綁定：好比[foo]=(bar$ | async).fubar這樣，若是fubar的值跟以前同樣，就不會觸發變化檢測。若是你想要觸發變化檢測，變通的方法就是讓整個引用發生變化。
• 時間日期格式化：formatDate()和DatePipe 的格式化代碼改了，以前的實現對於跨午夜的日期範圍有問題
• UrlMatcher背後的方法utility type如今的返回相似能夠是null
• ExpressionChangedAfterItHasBeenChecked 的報錯新增了以前沒檢測到的場景
• Angular日誌：模板裏的未知元素/屬性綁定從之前的warning輸出級別提高到error輸出級別
• 響應式表單：valueChanges 綁定到number類型的input時有個表單控制的bug，如今number的輸入框再也不監聽change事件，而是監聽input事件。記得修改你的測試樣例。這個還打破了IE9的兼容性，不過也不影響了。
• minLength 和maxLength驗證器：它的值保證包含數值類型的length屬性，之前沒有length屬性的falsy值會引發驗證錯誤。

遷移

參考遷移指南

總結

此文探索了Angular 10的新特性、廢棄特性，以及重大變動。儘管這個版本不是地震級的轟動發佈，但也修復了不少缺陷，也帶來不少寶藏。感謝Angular團隊和社區！