Angular 升級到最新版

2022-07-21 11:15 更新

更新 Angular

本指南包含更新到 Angular 版本 13 的信息。

更新 Angular CLI 應用程序

有關如何更新到最新的 Angular 版本和利用 Angular 自動遷移工具的分步說明,請使用 update.angular.io 上的交互式更新指南。

版本 13 中的更改與棄用

  • 移除視圖引擎
  • 需要使用 Ivy 構建所有應用程序和庫。請參閱即將到來的 Angular 庫分發(fā)改進 博客。

  • Angular 包格式 (APF) 的現(xiàn)代化
  • 移除了舊的輸出格式,包括視圖引擎特有的元數(shù)據(jù)。

  • 移除對 IE11 的支持
  • 移除對 Microsoft Internet Explorer 11 (IE11) 的所有支持。請參閱 問題 #41840。

  • 測試平臺模塊清理
  • 在 ?initTestEnvironment ?中添加選項以從應用程序中完全移除測試環(huán)境。請參閱 通過啟用 Angular 測試模塊清理來改進 Angular 測試 文章。

  • ?$localize? 標記的消息字符串
  • 添加 Angular ?$localize? API 和標記消息字符串的文檔。

  • 磁盤緩存
  • 默認情況下會為所有應用程序啟用持久構建緩存。請參閱 問題 #21545

Angular 版本 13 中的重大變化

詳情

PR #43642

PR #43642

不再支持 4.4.2 之前的 TypeScript 版本。

PR #43740

PR #43740

不再支持早于 v12.20.0 的 NodeJS 版本。 Angular 包現(xiàn)在使用帶有子路徑模式的 NodeJS 包導出功能,并且需要高于 14.15.0 或 16.10.0 的 NodeJS 版本。

PR #31187

PR #31187

以前,默認的 url 序列化程序移除了查詢參數(shù)中包含問號之后的所有內容。也就是說,如果要導航到 /path?q=hello?&other=123,查詢參數(shù)解析為僅 {q: 'hello'}。這是不正確的,因為 URI 規(guī)范允許在查詢數(shù)據(jù)中使用問號字符。此更改現(xiàn)在會正確地將 /path?q=hello?&other=123 的查詢參數(shù)解析為 {v: 'hello?', other: '123'}

PR #41730

PR #41730

SpyLocation 使用的 RouterTestingModule 的行為已更改以匹配瀏覽器的行為。當 Location.go 被調用時,它不再發(fā)出 popstate 事件。此外, simulateHashChange 現(xiàn)在會同時觸發(fā) hashchange 事件和 popstate 事件。那些用到了 location.go 并期望 Router 獲取更改的測試應遷移到 simulateHashChange。每個測試嘗試斷言的內容都不同,因此沒有任何一種改法能適用于所有測試。每個使用 SpyLocation 來模擬瀏覽器 URL 更改的測試都應根據(jù)具體情況進行評估。

PR #42952

PR #42952

引入了一種稱為 FormControlStatus 的新類型,它是表單控件所有可能狀態(tài)字符串的聯(lián)合。 AbstractControl.status 已經從 string 收窄到 FormControlStatus , statusChanges 已經從 Observable<any> 收窄到 Observable<FormControlStatus> 。大多數(shù)應用程序應該都能無縫地使用新類型。此更改導致的任何損壞都可能是由于以下兩個問題之一造成的:
1. 該應用程序正在將 AbstractControl.status 與無效的狀態(tài)字符串進行比較。
2. 該應用程序正在使用 statusChanges 事件,而它們不是字符串。

PR #43087

PR #43087

以前, routerLink 的 null 和 undefined 輸入等效于空字符串,并且無法禁用鏈接的導航。此外,href 從 HostBinding() Property 綁定更改為 Attribute 綁定( HostBinding('attr.href') )。此更改的效果是 DebugElement.properties['href'] 現(xiàn)在會返回由原生元素返回的 href 值,該值是完整的 URL,而不是 RouterLink href 屬性的內部值。

PR #43496

PR #43496

當新導航取消了正在進行的導航時,路由器不再替換瀏覽器 URL。瀏覽器 URL 的替換經常導致 URL 閃爍,這只是為了支持一些 AngularJS 混合應用程序。依賴于 Angular 路由器處理的每個初始導航上存在 navigationId 的混合應用程序應改為訂閱 NavigationCancel 事件并手動執(zhí)行 location.replaceState 以將 navigationId 添加到路由器狀態(tài)中。此外,應調整在 SpyLocation 上斷言 urlChanges 的測試以解決缺少 replaceState 觸發(fā)器的問題。

PR #43507

PR #43507

WrappedValue 類不再從 @angular/core 導入。如果使用依賴 WrappedValue 的過時庫,則此更改可能會導致編譯錯誤或運行時失敗。由于沒有可用的替代品,因此應移除對 WrappedValue 的依賴。

PR #43591

PR #43591

不能再將 Route.loadChildren 與字符串值一起使用。從 @angular/core 中移除了以下支持類:
NgModuleFactoryLoader
SystemJsNgModuleFactoryLoader
@angular/router 包不再導出下列符號:
SpyNgModuleFactoryLoader
DeprecatedLoadChildren
來自 @angular/core/testing 的 setupTestingRouter 函數(shù)的簽名已更改,移除了 NgModuleFactoryLoader 參數(shù),因為無法創(chuàng)建該參數(shù)的值。

PR #43668

PR #43668

SwUpdate#activateUpdate 和 SwUpdate#checkForUpdate 的返回類型更改為 Promise<boolean> 。
盡管不太可能,但在某些情況下,此更改可能會導致 TypeScript 類型檢查失敗。如有必要,請更新你的類型以說明新的返回類型。

問題 #22159

通過動態(tài) import() 加載的腳本現(xiàn)在被視為 ES 模塊(意味著它們必須是嚴格模式兼容的)。

新的棄用

已移除

替代品

詳情

?getModuleFactory? ?getNgModuleById?
?getModuleFactory? ?getNgModuleById?

?ApplicationRef.bootstrap? 的基于工廠的簽名

?ApplicationRef.bootstrap? 的基于類型的簽名

使用基于類型的簽名代替基于工廠的簽名。

?PlatformRef.bootstrapModuleFactory? ?PlatformRef.bootstrapModule?
?ModuleWithComponentFactories?

?Compiler?

?CompilerFactory?

?NgModuleFactory?

非基于工廠的框架 API

使用非基于工廠的框架 API,例如 ?PlatformRef.bootstrapModule? 和 ?createNgModuleRef? 。

?ViewContainerRef.createComponent? 的基于工廠的簽名

?ViewContainerRef.createComponent? 基于類型的簽名

使用基于類型的簽名代替基于工廠的簽名。

?TestBed.initTestEnvironment? 方法 的 aotSummaries 參數(shù)

?TestModuleMetadata? 類型 的 aotSummaries 參數(shù)

?renderModuleFactory? ?renderModule?

?SwUpdate#activated?

?SwUpdate#activated?

?SwUpdate#activateUpdate()?

?SwUpdate#activateUpdate()?

使用 ?SwUpdate#activateUpdate()? 的返回值。

?SwUpdate#available? ?SwUpdate#versionUpdates?
bind-input="value" [input]="value"
bind-animate-trigger="value" [@trigger]="value"
on-click="onClick()" (click)="onClick()"
bindon-ngModel="value" [(ngModel)]="value"
ref-templateRef #templateRef


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號