class
當陰影(#35350)(8220363),關閉時,正確地將靜態和動態綁定連接#35335
Map
/ Set
in [class]
/ [style]
綁定的支持(#35392)(1797390)LFrame
需要釋放leaveView()
(#35156)(4b1dcaf)上的內存#35148
以下是翻譯
Angular 的 9.0.0 版本發布了!這是一個跨平台的主版本,包括框架、Angular Material 和 CLI。這個版本默認會把應用程序切換到 Ivy 編譯器和運行時,並改進了組件測試方法。
這是 Angular 在過去 3 年中所做的最重大更新之一,我們很高興能通過各種方式幫助開發人員構建出更好的應用並為 Angular 生態系統做出貢獻。
訪問 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 」。
默認情況下,版本 9 會把所有的應用程序遷移成使用 Ivy 編譯器和運行時的。除了數以百計的 bug 修復之外,Ivy 編譯器和運行時還提供了許多優點:
下面是一些比較值得注意的改進項。
Ivy 編譯器的設計目的是刪除那些無法通過搖樹優化使用的 Angular 部件,並為每個 Angular 組件生成更少的代碼。
通過這些改進,小型應用和大型應用可以節省大量成本。
我們還改進了 Ivy 中 TestBed 的實現,以提高效率。
以前,TestBed
會在運行每個測試之間重新編譯所有組件,而不管組件是否有任何變化(例如,通過覆寫)。
在 Ivy 中,除非已經手動覆蓋了一個組件,否則 TestBed
不會在這些測試之間重新編譯組件,這樣就可以避免大多數測試間的重新編譯。
有了這項更改,框架的核心驗收測試速度提高了大約 40%。我們期待用戶自己的應用測試速度也能提高 40-50%左右。
Ivy 為你提供了更多調試應用的工具。當我使用 Ivy 運行時在開發模式下運行應用時,我們現在提供了新的全局對象 ng
來進行調試。
applyChanges
來觸發變更檢測Ivy 還改進了用於調試問題的調用棧跟蹤,比如 ExpressionChangedAfterItHasBeenCheckedError
。以前堆棧跟蹤可能沒多少幫助:
在 Ivy 中,你可以看到一個更實用的調用棧跟蹤,它允許你直接從一個已更改的表達式跳轉到模板指令。
例如,如果在上面的堆棧跟蹤中單擊 AppComponent_Template
,就可以在生成的代碼中看到拋出該錯誤的具體代碼行:
如果願意,你還可以進入任何一個框架指令,來了解框架是如何創建或更新你的組件的。
Ivy 編譯器和運行時改進了處理樣式的方式。以前,如果一個應用程序包含了對某種樣式的競爭性定義,那些樣式就會破壞性地相互覆蓋。在 Ivy 中,樣式將以可預測的方式合併在一起。
考慮下面的模板和組件片段:
<my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div>
@Component({
host: {
style: "color:blue"
},...
})
...
@Directive({
host: {
style: "color:black",
"[style.color]": "property"
},...
})
...
以前,被最後計算出的那種綁定會勝出,而這可能取決於對這些表達式的修改時機。而如果 myColor
和 myOtherColor
都是未定義的,靜態的'red'樣式就會被忽略。
在版本 9 中,你可以通過一個清晰、一致的優先順序來管理你的樣式,而這些順序與時間無關。最具體的樣式始終具有最高的優先順序。例如,對 [style.color]
的綁定會覆蓋 [style]
中的同名綁定。
但是,出於向後兼容性的考慮,我們仍然把 [ngStyle]
和 [ngClass]
的綁定行為保持原樣。也就是說,它們的綁定值發生變化時,新值會覆蓋任何競爭性綁定。
你可以在文檔中的模板語法一章閱讀更多關於樣式優先順序規則的內容。
作為樣式重構的一個額外收穫,你現在也可以綁定 CSS 自定義屬性(也叫 CSS 變數)了。
<div [style. -- main-border-color]=" '#CCC' ">
<p style="border: 1px solid var(--main-border-color)">hi</p>
</div>
Angular 編譯器可以檢查應用中的更多類型,還可以應用更嚴格的規則。這些特性可以幫助你和你的團隊在開發過程的早期階段發現 bug。
除默認值外,我們還支持兩個主要的標誌來進行額外的類型檢查:
fullTemplateTypeCheck
- 激活這個標誌會告訴編譯器要檢查你模板中的所有內容( ngIf
, ngFor
, ng-template
等)strictTemplates
- 激活這個標誌會在類型檢查中使用最嚴格的類型系統規則。要了解有關模板類型檢查選項的更多信息,請參閱文檔中的模板類型檢查指南 。
新的 Ivy 編譯器不僅運行速度更快、有更強大的類型安全性,而且還能讓所有的錯誤信息更容易閱讀。
在版本 8 或 View Engine 中,典型的編譯器錯誤如下所示:
在使用 Ivy 的 9 版本中,同樣的錯誤如下:
感謝 Ivy 的新架構,我們對編譯器的性能做了很大的改進。
我們會根據應用中普通的 TypeScript 編譯開銷來衡量編譯器的性能。對於我們的文檔應用(http://angular.io)來說,使用 Ivy 時,這個開銷從 0.8 倍減少到了 0.5 倍,提升了近 40%。
這些改進意味著 AOT 構建的速度可以顯著加快。感謝這次加速,我們第一次在開發模式下使用 AOT。這意味著 ng serve
現在可以從與構建時相同的編譯期檢查中獲益,從而大大提高了 Angular 的開發體驗。
由於編譯器和運行時都發生了變化,我們也不再需要 [entryComponents](https://angular.cn/guide/deprecations#entryComponents)
。這些組件全都會根據用途被自動發現和編譯。
國際化已經成為 Angular 的核心特性,你可以在每個語言環境中構建一次應用,並收穫高度優化的本地化應用。在 9.0 中,我們通過把 i18n 的工作移到構建過程的後期實現了這一目標。這種變化讓我們能把它提速 10 倍。
閱讀更多 以了解關於新 i18n 中 @angular/localize
和新的 angular.json
配置的信息。
該團隊還努力工作,不斷提升使用 Angular 的全部體驗。
我們對 ng update
工作方式進行了一些修改,以提高它的可靠性和信息量。
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)的一部分提供給任何一位組件作者。
這是一個在使用組件挽具之前的一個測試範例:
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(); // Click the second option, "Bug".
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});
而用組件挽具做同樣的測試如下:
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();
});
了解更多關於 Material 的組件測試挽具或用 CDK 構建你自己的挽具。
你現在可以在應用中添加來自 YouTube 和谷歌地圖的功能了。
Visual Studio Marketplace 上的 Angular 語言服務擴展已做了重大改進。隨著對性能和穩定性問題的重大架構變革,許多長期存在的漏洞也得到了修復。還包括一些新特性:
templateUrl
和 styleUrls
的「轉到定義」功能Angular 已經更新,可以用 TypeScript 3.6 和 3.7 了,也包括 TypeScript 3.7 中非常受歡迎的可選串聯(optional chaining)特性。為了與生態系統保持同步,我們還更新了其他生態系統依賴的版本,比如 Zone.JS 和 RxJS。
[admin
]