Angular 9 正式發佈

Angular 9 現已推出 - Ivy 已抵達！

Angular 9.0.0 版本發佈了！這是一個跨平臺的主版本，包括框架、Angular Material 和 CLI。這個版本默認會把應用程序切換到 Ivy 編譯器和運行時，並改進了組件測試方法。

這是 Angular 在過去 3 年中所做的最重大更新之一，我們很高興能通過各種方式幫助開發人員構建出更好的應用併為 Angular 生態系統做出貢獻。

如何更新到版本 9

訪問 update.angular.io，獲取詳細信息和升級指導。為了獲得最佳的更新體驗，我們建議你先升級到 Angular 8 的最終版。

首先，更新到 8 的最新版本

ng update @angular/cli@8 @angular/core@8

然後，升級到 9

ng update @angular/cli @angular/core

要查看使用此更新內容的關鍵修改（包括已棄用了哪些 API），請參閱 Angular 文檔中的“更新到 Angular 9 ”。

Ivy（常春藤）

默認情況下，版本 9 會把所有的應用程序遷移成使用 Ivy 編譯器和運行時的。除了數以百計的 bug 修復之外，Ivy 編譯器和運行時還提供了許多優點：

• 打包尺寸更小
• 測試速度更快
• 更好的調試
• 改進了 CSS 類和樣式綁定
• 改進了類型檢查
• 改進了構建錯誤
• 縮短了構建時間，默認啟用了 AOT
• 改進了國際化支持

下面是一些比較值得注意的改進項。

打包尺寸更小

Ivy 編譯器的設計目的是刪除那些無法通過搖樹優化使用的 Angular 部件，併為每個 Angular 組件生成更少的代碼。

通過這些改進，小型應用和大型應用可以節省大量成本。

• 那些沒用多少 Angular 特性的小應用從搖樹優化中受益最多。
• 包含很多組件的大型應用從減小的工廠函數體積中受益最多。
• 中等大小應用的包體積可能只會小一點點，因為它們從搖樹優化中受益較少，並且沒有足夠的組件從減小的工廠函數體積中受益。

小型應用程序的發佈包體積可減少約 30％，大型應用程序的發佈包體積可減少 25–40％，而中型應用程序的發佈包受益最少。

測試速度更快

我們還改進了 Ivy 中 TestBed 的實現，以提高效率。

以前，TestBed 會在運行每個測試之間重新編譯所有組件，而不管組件是否有任何變化（例如，通過覆寫）。

在 Ivy 中，除非已經手動覆蓋了一個組件，否則 TestBed 不會在這些測試之間重新編譯組件，這樣就可以避免大多數測試間的重新編譯。

有了這項更改，框架的核心驗收測試速度提高了大約 40％。我們期待用戶自己的應用測試速度也能提高 40-50％左右。

更好的調試

Ivy 為你提供了更多調試應用的工具。當我使用 Ivy 運行時在開發模式下運行應用時，我們現在提供了新的全局對象 ng 來進行調試。

• 你可以要求 Angular 訪問你的組件、指令等實例
• 你可以手動調用各個方法並更新狀態
• 如果要查看變更檢測的結果，可以使用 applyChanges 來觸發變更檢測

Ivy 還改進了用於調試問題的調用棧跟蹤，比如 ExpressionChangedAfterItHasBeenCheckedError 。以前堆棧跟蹤可能沒多少幫助：

在 Ivy 中，你可以看到一個更實用的調用棧跟蹤，它允許你直接從一個已更改的表達式跳轉到模板指令。

例如，如果在上面的堆棧跟蹤中單擊 AppComponent_Template，就可以在生成的代碼中看到拋出該錯誤的具體代碼行：

如果願意，你還可以進入任何一個框架指令，來了解框架是如何創建或更新你的組件的。

改進了 CSS 類和樣式綁定

Ivy 編譯器和運行時改進了處理樣式的方式。以前，如果一個應用程序包含了對某種樣式的競爭性定義，那些樣式就會破壞性地相互覆蓋。在 Ivy 中，樣式將以可預測的方式合併在一起。

考慮下面的模板和組件片段：

<code>
<
my-component
 
style
=
"color:red;"
 [
style.color
]=
"myColor"
 [
style
]=
"{color: myOtherColor}"
 
myDirective
>
div
>
/<code>

<code>
@Component
({
  
host
: {
    
style
: 
"color:blue" 

  },...
})
...

@Directive
({
  
host
: {
    
style
: 
"color:black"
,
    
"[style.color]"
: 
"property"
  },...
})
.../<code>

以前，被最後計算出的那種綁定會勝出，而這可能取決於對這些表達式的修改時機。而如果 myColor 和 myOtherColor 都是未定義的，靜態的'red'樣式就會被忽略。

在版本 9 中，你可以通過一個清晰、一致的優先順序來管理你的樣式，而這些順序與時間無關。最具體的樣式始終具有最高的優先級。例如，對 [style.color] 的綁定會覆蓋 [style] 中的同名綁定。

但是，出於向後兼容性的考慮，我們仍然把 [ngStyle] 和 [ngClass] 的綁定行為保持原樣。也就是說，它們的綁定值發生變化時，新值會覆蓋任何競爭性綁定。

你可以在文檔中的模板語法一章閱讀更多關於樣式優先級規則的內容。

作為樣式重構的一個額外收穫，你現在也可以綁定 CSS 自定義屬性（也叫 CSS 變量）了。

<code>
<
div
 [
style.
 
--
 
main-border-color
]=
" '#CCC' "
>

<
p
 
style
=
"border: 1px solid var(--main-border-color)"
>
hi
p
>

div
>
/<code>

改進了類型檢查

Angular 編譯器可以檢查應用中的更多類型，還可以應用更嚴格的規則。這些特性可以幫助你和你的團隊在開發過程的早期階段發現 bug。

除默認值外，我們還支持兩個主要的標誌來進行額外的類型檢查：

• fullTemplateTypeCheck - 激活這個標誌會告訴編譯器要檢查你模板中的所有內容（ ngIf ， ngFor ， ng-template 等）
• strictTemplates - 激活這個標誌會在類型檢查中使用最嚴格的類型系統規則。

要了解有關模板類型檢查選項的更多信息，請參閱文檔中的模板類型檢查指南 。

改進了構建錯誤

新的 Ivy 編譯器不僅運行速度更快、有更強大的類型安全性，而且還能讓所有的錯誤信息更容易閱讀。

在版本 8 或 View Engine 中，典型的編譯器錯誤如下所示：

在使用 Ivy 的 9 版本中，同樣的錯誤如下：

縮短了構建時間，默認啟用了預先編譯器（AOT）

感謝 Ivy 的新架構，我們對編譯器的性能做了很大的改進。

我們會根據應用中普通的 TypeScript 編譯開銷來衡量編譯器的性能。對於我們的文檔應用（angular.io）來說，使用 Ivy 時，這個開銷從 0.8 倍減少到了 0.5 倍，提升了近 40％。

這些改進意味著 AOT 構建的速度可以顯著加快。感謝這次加速，我們第一次在開發模式下使用 AOT。這意味著 ng serve 現在可以從與構建時相同的編譯期檢查中獲益，從而大大提高了 Angular 的開發體驗。

由於編譯器和運行時都發生了變化，我們也不再需要 [entryComponents](https://angular.cn/guide/deprecations#entryComponents) 。這些組件全都會根據用途被自動發現和編譯。

改進了國際化支持（i18n）

國際化已經成為 Angular 的核心特性，你可以在每個語言環境中構建一次應用，並收穫高度優化的本地化應用。在 9.0 中，我們通過把 i18n 的工作移到構建過程的後期實現了這一目標。這種變化讓我們能把它提速 10 倍。

閱讀更多 以瞭解關於新 i18n 中 @angular/localize 和新的 angular.json 配置的信息。

版本 9 還有其它一些改進

該團隊還努力工作，不斷提升使用 Angular 的全部體驗。

更可靠的 ng update

我們對 ng update 工作方式進行了一些修改，以提高它的可靠性和信息量。

• 始終使用最新的 CLI。從 CLI 的 8.3.19 版本開始，我們現在在升級過程中使用了 TARGET 版本的 CLI。這意味著，在未來，更新將始終由最新的 CLI 自動處理。
• 進度更新更清晰。ng update 現在做了更多的工作來告訴你幕後的情況。對於每次遷移，你都會看到遷移中的更多信息。
• 更容易對更新進行調試。默認情況下，ng update 運行所有遷移，並在磁盤上留下最終結果更改供你檢查。版本 9 的更新還引入了新的 --create-commits 標誌。當你運行 ng update --create-commits 時，該工具會在每個遷移動作後提交代碼庫的狀態，這樣你就可以逐步理解或調試我們對代碼所做的更改。

providedIn 的新選項

當你在 Angular 中創建一個 @Injectable 服務時，你必須選擇它應該添加到注入器的什麼位置。除了以前的 root 和模塊這兩種選項之外，還有兩個新選項。

• platform - 指定 providedIn: 'platform' 可以在一個特殊的單例平臺注入器中使用該服務，該注入器由該頁面上的所有應用共享。
• any - 在每個注入該令牌的模塊（包括惰性加載模塊）中提供一個唯一的實例。

請到我們的 API 文檔中瞭解詳情 。

組件的測試挽具

歷史上，測試組件一直靠 CSS 選擇器這樣的實現細節來查找組件和觸發事件。這意味著只要組件庫改變了它的實現，就需要更新依賴這些組件的所有測試。

在版本 9 中，我們引入了組件的測試挽具，它提供了另一種測試組件的方法。通過抽象出實現細節，你可以確保你的單元測試被正確的局部化，而且不那麼脆弱。

現在，Angular Material 的大多數組件都可以通過這些挽具進行測試，而且我們還會把這些挽具作為組件開發套件 （CDK）的一部分提供給任何一位組件作者。

這是一個在使用組件挽具之前的一個測試範例：

<code>it(
"should switch to bug report template"
, 
async
 () => {
  expect(fixture.debugElement.query(
"bug-report-form"
)).toBeNull();
  
const 
 selectTrigger = fixture.debugElement.query(
    By.css(
".mat-select-trigger"
)
  );
  selectTrigger.triggerEventHandler(
"click"
, {});
  fixture.detectChanges();
  
await
 fixture.whenStable();
  
const
 options = 
document
.querySelectorAll(
".mat-select-panel mat-option"
);
  options[
1
].click();  
  fixture.detectChanges();
  
await
 fixture.whenStable();
  expect(fixture.debugElement.query(
"bug-report-form"
)).not.toBeNull();
});/<code>

而用組件挽具做同樣的測試如下：

<code>it(
"should switch to bug report template"
, 
async
 () => {
  expect(fixture.debugElement.query(
"bug-report-form"
)).toBeNull();
  
const
 
select
 = 
await
 loader.getHarness(MatSelect);
  
await
 
select
.clickOptions({ text: 
"Bug"
 });
  expect(fixture.debugElement.query(
"bug-report-form"
)).not.toBeNull();
});/<code>

瞭解更多關於 Material 的組件測試挽具或用 CDK 構建你自己的挽具。

新的組件

你現在可以在應用中添加來自 YouTube 和谷歌地圖的功能了。

• 你可以使用全新的 youtube-player ，在你的應用中內嵌 YouTube 播放器。當你加載了 YouTube 的 IFrame 播放器 API 之後，這個組件就會利用它。
• 我們還推出了 google-maps 組件。利用這些組件，你可以輕鬆地渲染谷歌地圖，顯示地標，並像普通的 Angular 組件一樣與其交互，讓你無需學習完整的 Google Maps API 即可使用。

IDE 和語言服務改進

轉到定義（Go to definition）和改進的語言服務演示

Visual Studio Marketplace 上的 Angular 語言服務擴展已做了重大改進。隨著對性能和穩定性問題的重大架構變革，許多長期存在的漏洞也得到了修復。還包括一些新特性：

• Angular 模板語法的 TextMate 語法定義，現在可以在內聯和外部模板中啟用語法高亮顯示了
• 針對 templateUrl 和 styleUrls 的“轉到定義”功能
• 懸浮工具提示中的 NgModule 和類型信息

TypeScript 3.7 支持

Angular 已經更新，可以用 TypeScript 3.6 和 3.7 了，也包括 TypeScript 3.7 中非常受歡迎的可選串聯（optional chaining）特性。為了與生態系統保持同步，我們還更新了其他生態系統依賴的版本，比如 Zone.JS 和 RxJS。

謝謝社區

這個版本是兩年多來工作的結晶。我們對這項工作的未來及其無限可能感到非常興奮。如果沒有社區數百人的努力，這是不可能實現的。

v9 貢獻者：

Aaron Frost, Adam J. Penn, Adam Plumer, Adam Vigneaux, Adrien Crivelli, Ajit Singh, Alain Chautard, Alan Agius, Alexander Ivanov, Alexander von Weiss, Alex Eagle, Alex Rickabaugh, alexzuza, Ali Mirlou, Alison Gale, Alyssa Nicoll, Amadou Sall, AMarinov, Amit Dubey, Anders Kjær Damgaard, Andrew Kushnir, Andrew Scott, Andrew Seguin, Andrius, Andrus Diaz, Ankit Prajapati, Aravind, Aristeidis Bampakos, Arne Hoek, Artur Androsovych, arturovt, Atef Ben Ali, Ayaz Hafiz, Ben Elliott, Benjamin Liii, Brian Michalski, CaerusKaru, Carlos Ortiz García, Cédric Exbrayat, Charles Lyding, Christian Liebel, Christopher Dahm, codingnuclei, Colum Ferry, Craig Spence, cran-cg, crisbeto, Cyrille Tuzi, Daniele Morosinotto, Daniel Waxweiler, Danny Skoog, David Sánchez, David Shevitz, Denis Omelkov, Denys Vuika, Diego Juliao, dishanfernando, Dmitri Ischenko, Dominik Pieper, Do Nhu Vy, Doug Parker, Dyma, EddyP23, Edy Segura, Eliran Eliassy, Elvis Begovic, Emmanuel DEMEY, Ephraim, Erik Pintar, Esteban Gehring, Eusen, Evan Martin, FabianGosebrink, FaustmannChr, FDIM, Ferdinand Malcher, FG-33, Filipe Silva, Gabor Szekely, Gabriel Medeiros Coelho, GavinMK, Geoff Bass, George Kalpakas, Gérôme Grignon, ghiscoding, Girma Nigusse, Greg Magolan, Grigoriy Beziuk, hafiz, Harinder Singh, Hayouung, Hoel IRIS, horn, idzark, Igor Minar, Issei Horie, ivanwonder, Jakub Pawlot, James Vickery, Jan Malchert, Jason Bedard, Jeff Held, Jennifer Fell, Jeremy Elbourn, JiaLiPassion, Jithil P Ponnan, jnavb, Joakim Zebic, Joey Perrott, john li, John Ralph Umandal, Jonathan Sharpe, Joost Koehoorn, Jordan Amman, Jordan Nelson, Joshua Colvin, Judy Bogart, J Z, Kai Röder, Kapunahele Wong, Kara Erickson, katryo, Kayla Altepeter, Keen Yee Liau, ketangote, Kirk Larkin, Koala, Kristina Gocheva, kristinavavrova, Kristiyan Kostadinov, Kwinten Pisman, Kyle J. Kemp, Lars Gyrup Brink Nielsen, LASLEDJ, lazarljubenovic, Leonardo Zizzamia, Leon Radley, Luka Petrovic, Mansour Fall, manzonif, Mark Goho, Martina Kraus, Martin Probst, Matias Niemelä, Matthew Harris, Matt Janssen, Mayur Barge, mbehrlich, mertdeg2, Michael Maier, Michael Nahkies, Michael Prentice, Michał Koziara, Mike Brocchi, Mike Casebolt, mikef, Miles Malerba, Minko Gechev, Mirco Widmer, Misko Hevery, Miško Hevery, Mitchell Skaggs, mohax, Muhammad Umair, Muhammad Umair Khan, Nathan Tate, Németh Tamás, Nicolas Villanueva, Nikita Potapenko, Niklas Merz, noeri, Noopur, NothingEverHappens, ODAVING, Olegas Goncarovas, Olivier Combe, Orlando Pozo, owenmecham, Pascal Fivian, paulceli, Paul Gschwendtner, Pawel Kozlowski, Pete Bacon Darwin, Phaneendra, philonor, Pierre-Yves FARE, Piotr Błażejewicz, Potapy4, Rado Kirov, Ralf D. Müller, Raz Luvaton, Reuben Wilson, Richard Lea, Rick Katka, Robert Coie, Robin Dupret, Roy, Rudar Daman Singla, Rustam, Sachin, Sahan Serasinghe, Sam Julien, Santosh Yadav, Sasha Rudan, Sergey Koshechkin, Sergey Nikitin, Shibasish, Sholka Jadav, Showtim3, ShubhrankR, Simon Jespersen, Simon Kurtz, skrikl, Smartin, Sonu Kapoor, Srichandradeep Choudarapu, Sriram Jayarman, Stefanie Fluin, Stephen Cooper, Stephen Fluin, Suguru Inatomi, Suresh918, Syu Kato, thanhpd, thekiba, TheMushr00m, Tiep Phan, Timar, Tim Deschryver, TinyMan, Tom Kwong, Tom Sullivan, Trevor Karjanis, Troels Lenda, Turtuvshin Byambaa, Vanessa Schmitt, Victor, Vikash Dahiya, Vikram Subramanian, Wagner Maciel, Wataru Kasahara, Wenqi, why520crazy, willbeaufoy, William Lohan, WreckItRalph, Yann Bertrand, Younes Jaaidi, Yulia Tsareva, Zaid Al-Omari, zuckjet, 陳旭.

我們還要感謝我們的 GDE 和整個社區。我們收到的反饋、問題報告和問題重現工程對於讓我們的工作達到最高質量標準至關重要。使用版本 9 的公開 Angular 應用已經超過了 4000 個。

特別要感謝我們的長期企業合作伙伴 Pawel Kozlowski 和他的贊助商 Amadeus。在 Ivy 項目的兩年時間裡，帕維爾以極高的品質做出了巨大的貢獻，這是該項目成功的關鍵部分。