Angular 升級(jí)到最新版

2022-07-21 11:15 更新

更新 Angular

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

更新 Angular CLI 應(yīng)用程序

有關(guān)如何更新到最新的 Angular 版本和利用 Angular 自動(dòng)遷移工具的分步說(shuō)明,請(qǐng)使用 update.angular.io 上的交互式更新指南。

版本 13 中的更改與棄用

  • 移除視圖引擎
  • 需要使用 Ivy 構(gòu)建所有應(yīng)用程序和庫(kù)。請(qǐng)參閱即將到來(lái)的 Angular 庫(kù)分發(fā)改進(jìn) 博客。

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

  • 移除對(duì) IE11 的支持
  • 移除對(duì) Microsoft Internet Explorer 11 (IE11) 的所有支持。請(qǐng)參閱 問(wèn)題 #41840

  • 測(cè)試平臺(tái)模塊清理
  • 在 ?initTestEnvironment ?中添加選項(xiàng)以從應(yīng)用程序中完全移除測(cè)試環(huán)境。請(qǐng)參閱 通過(guò)啟用 Angular 測(cè)試模塊清理來(lái)改進(jìn) Angular 測(cè)試 文章。

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

  • 磁盤緩存
  • 默認(rèn)情況下會(huì)為所有應(yīng)用程序啟用持久構(gòu)建緩存。請(qǐng)參閱 問(wèn)題 #21545。

Angular 版本 13 中的重大變化

詳情

PR #43642

PR #43642

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

PR #43740

PR #43740

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

PR #31187

PR #31187

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

PR #41730

PR #41730

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

PR #42952

PR #42952

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

PR #43087

PR #43087

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

PR #43496

PR #43496

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

PR #43507

PR #43507

WrappedValue 類不再?gòu)?nbsp;@angular/core 導(dǎo)入。如果使用依賴 WrappedValue 的過(guò)時(shí)庫(kù),則此更改可能會(huì)導(dǎo)致編譯錯(cuò)誤或運(yùn)行時(shí)失敗。由于沒(méi)有可用的替代品,因此應(yīng)移除對(duì) WrappedValue 的依賴。

PR #43591

PR #43591

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

PR #43668

PR #43668

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

問(wèn)題 #22159

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

新的棄用

已移除

替代品

詳情

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

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

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

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

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

無(wú)

?Compiler?

無(wú)

?CompilerFactory?

無(wú)

?NgModuleFactory?

非基于工廠的框架 API

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

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

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

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

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

無(wú)

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

無(wú)

?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


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)