Angular 升級(jí)到最新版

2022-07-21 11:15 更新

更新 Angular

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

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

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

版本 13 中的更改與棄用

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

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

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

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

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

  • 磁盤緩存
  • 默認(rèn)情況下會(huì)為所有應(yīng)用程序啟用持久構(gòu)建緩存。請(qǐng)參閱 問題 #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ù)中包含問號(hào)之后的所有內(nèi)容。也就是說,如果要導(dǎo)航到 /path?q=hello?&other=123,查詢參數(shù)解析為僅 {q: 'hello'}。這是不正確的,因?yàn)?URI 規(guī)范允許在查詢數(shù)據(jù)中使用問號(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)容都不同,因此沒有任何一種改法能適用于所有測(cè)試。每個(gè)使用 SpyLocation 來模擬瀏覽器 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)該都能無縫地使用新類型。此更改導(dǎo)致的任何損壞都可能是由于以下兩個(gè)問題之一造成的:
1. 該應(yīng)用程序正在將 AbstractControl.status 與無效的狀態(tài)字符串進(jìn)行比較。
2. 該應(yīng)用程序正在使用 statusChanges 事件,而它們不是字符串。

PR #43087

PR #43087

以前, routerLink 的 null 和 undefined 輸入等效于空字符串,并且無法禁用鏈接的導(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ā)器的問題。

PR #43507

PR #43507

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

PR #43591

PR #43591

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

PR #43668

PR #43668

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

問題 #22159

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

新的棄用

已移除

替代品

詳情

?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


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

掃描二維碼

下載編程獅App

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

編程獅公眾號(hào)