Google 的 Angular 團(tuán)隊(duì)將 Angular 15 的最新發(fā)布日期定為 2022 年 11 月 16 日。該團(tuán)隊(duì)在最新版本中引入了許多功能和更新，以提供更好的開(kāi)發(fā)人員體驗(yàn)和性能。盡管在之前的 Angular 版本發(fā)布中，團(tuán)隊(duì)帶來(lái)了許多激動(dòng)人心的變化。但最新版本的 Angular 15 功能和更新在任何意義上都不會(huì)缺少吸引開(kāi)發(fā)人員、企業(yè)主和技術(shù)愛(ài)好者的注意力。

Angular 15 的新特性和更新

隨著 Angular 14 的發(fā)布，Angular 團(tuán)隊(duì)正式提到移除 Angular 遺留的編譯器和渲染管道顯著改善了開(kāi)發(fā)者的體驗(yàn)。同樣，考慮 Angular 14 與 Angular 15。最新的 Angular 15 新特性包括穩(wěn)定的獨(dú)立 API，允許 Angular 開(kāi)發(fā)人員在沒(méi)有 Ng 模塊的情況下構(gòu)建應(yīng)用程序。它還為開(kāi)發(fā)人員提供了更少的樣板代碼、增強(qiáng)的性能、指令組合 API 以及許多其他在體驗(yàn)和性能方面的更新和功能。現(xiàn)在讓我們?cè)敿?xì)討論讓開(kāi)發(fā)人員社區(qū)感到驚訝的 Angular 15 大功能和更新。

獨(dú)立 API（現(xiàn)在，Gradated 和開(kāi)發(fā)者預(yù)覽版）

?? Angular 團(tuán)隊(duì)在Angular 14中引入了 Standalone API ，允許開(kāi)發(fā)人員在不使用 Ng 模塊的情況下構(gòu)建應(yīng)用程序?，F(xiàn)在在 Angular 15 中，它已經(jīng)從 Developer 預(yù)覽版畢業(yè)并變得穩(wěn)定。
?? Angular 團(tuán)隊(duì)確保獨(dú)立 API 已準(zhǔn)備好升級(jí)，并且獨(dú)立組件可跨 Angular 使用。他們現(xiàn)在在 HttpClient、Angular Elements、路由器等方面全力以赴。
?? 在 Angular 15 中，使用獨(dú)立組件允許使用客戶端路由器、角度元素等與 HTTP 同步工作。
?? 隨著它變得穩(wěn)定，它允許在單個(gè)組件中引導(dǎo)應(yīng)用程序。為此，我們可以直接從平臺(tái)瀏覽器導(dǎo)入引導(dǎo)程序應(yīng)用程序并將其轉(zhuǎn)移到組件中。此外，使用 import 函數(shù)允許我們直接在管道中引用 standalone，因此，我們可以將組件管道和指令標(biāo)記為 standalone true。

獨(dú)立的 API 允許創(chuàng)建多路由應(yīng)用程序

?? 現(xiàn)在您可以使用新的路由器獨(dú)立 API 構(gòu)建多路由應(yīng)用程序。
?? 此外，打包器可以通過(guò)在構(gòu)建時(shí)從路由器中刪除未使用的功能，將打包大小減少大約 11%。

指令組合 API

?? 由于 GitHub 上最流行的功能請(qǐng)求，此功能主要在最新的 Angular 15 版本中實(shí)現(xiàn)。
?? 此功能允許或有助于代碼的可重用性。
?? 它允許開(kāi)發(fā)人員使用指令增加宿主元素，并使用代碼可重用性功能構(gòu)建Angular 應(yīng)用程序，這有助于在開(kāi)發(fā)過(guò)程中進(jìn)行有效的時(shí)間管理。
?? 在 Angular 編譯器的幫助下，指令組合 API 可以與 Standalone 指令一起使用。
?? 在這個(gè)組件下，聲明了所有的指令；因此，實(shí)現(xiàn)了 Directive Composition API 功能。

圖像指令（NgOptimized 圖像）現(xiàn)已穩(wěn)定

?? 在 v14.2 中與 Chrome Aurora 合作，在 Angular 版本 14 中引入了圖像指令（Ngoptimized 圖像）。
?? The Land's End 試驗(yàn)了此功能，在燈塔實(shí)驗(yàn)室測(cè)試中，LCP 或 Largest Contentful Paint 提升了約 75%。

Angular 15 新功能中的圖像指令還包括：

• Automatic srcset generation 是自動(dòng)生成 SRC 集的指令，它有助于在任何請(qǐng)求的地方上傳和適當(dāng)調(diào)整圖像大小，從而減少圖像的下載時(shí)間。

• 填充模式（實(shí)驗(yàn)性）是一項(xiàng)功能，無(wú)需聲明圖像尺寸并將圖像填充到其父容器。在遷移 CSS 背景圖片時(shí)使用這個(gè)指令是非常有益的。

使用 app Ngoptimized 圖片指令，你也可以直接在 Angular 組件或 Ng 模塊中使用 NgOptimized 圖片指令：

從'@angular/common'導(dǎo)入{NgOptimizedImage}；// 將其包含到必要的 NgModule 中@NgModule({
  導(dǎo)入：[NgOptimizedImage]，})類(lèi) AppModule {}// ... 或者一個(gè)獨(dú)立的組件@成分（{
  獨(dú)立：真
  導(dǎo)入：[NgOptimizedImage]，})類(lèi) MyStandaloneComponent {}

功能路由器守衛(wèi)

?? 使用 tree-shakable 獨(dú)立路由器 API，Angular 團(tuán)隊(duì)致力于通過(guò)重構(gòu)代碼來(lái)減少樣板文件，從而使用新的 Functional Router Guards 減少 Angular 的包大??；我們可以重構(gòu)代碼。

路由器解包默認(rèn)導(dǎo)入

?? 使路由器更簡(jiǎn)單并進(jìn)一步減少樣板文件，路由器現(xiàn)在使用延遲加載自動(dòng)解包默認(rèn)導(dǎo)出，進(jìn)一步有助于減少代碼。

更好的堆棧跟蹤

?? 現(xiàn)在，您可以使用 Stack Trace 高效且簡(jiǎn)單地跟蹤代碼；當(dāng)遇到任何錯(cuò)誤時(shí)，此功能會(huì)有所幫助，并有助于找到出現(xiàn)或發(fā)現(xiàn)此錯(cuò)誤的位置。

通過(guò)查看開(kāi)發(fā)人員的調(diào)試斗爭(zhēng)引入了此功能。

穩(wěn)定的基于 MDC 的組件

?? 在 Angular 版本 14 之前，重構(gòu)基于組件的 Angular 材料很復(fù)雜，但是有了 MDC（Web 材料設(shè)計(jì)組件），這是可能的。
?? 在 Angular 15 Features 中，每個(gè)新組件的舊實(shí)現(xiàn)現(xiàn)已棄用，但仍可從“遺留”導(dǎo)入中獲得。

其他改進(jìn)

?? 滑塊中的范圍選擇支持是社區(qū)中第四大投票問(wèn)題。

使用下面給出的代碼獲取范圍輸入：

<墊滑塊>
  <輸入 matSliderStartThumb>
  <輸入 matSliderEndThumb></墊滑塊>

CDK（組件開(kāi)發(fā)工具包）列表框

?? CDK 提供不同的行為原語(yǔ)并有助于創(chuàng)建 UI 組件。在最新版本的 Angular 中，添加了一個(gè)名為 CDK Listbox 的新原語(yǔ)，它有助于根據(jù)需求自定義由 WAI-ARIA Listbox 模式繪制的 Listbox 交互。

自動(dòng)語(yǔ)言服務(wù)導(dǎo)入

語(yǔ)言服務(wù)現(xiàn)在可以導(dǎo)入所需的組件或正在模板中使用但尚未添加到獨(dú)立組件或 Ng 模塊的組件。

擴(kuò)展的 esbuild 支持

來(lái)源

?? esbuild 實(shí)驗(yàn)性支持在 Angular 14 中宣布構(gòu)建以加快構(gòu)建時(shí)間并簡(jiǎn)化管道。
?? 現(xiàn)在在 Angular 15 中，這是通過(guò)另存為 SVG 模板、文件替換和現(xiàn)在完成的ng build –watch支持。

如何從 Angular v14 升級(jí)到 Angular v15

??前往https://update.angular.io/

?? 選擇最適合您要求的選項(xiàng)。
?? 點(diǎn)擊告訴我如何更新按鈕

從 Angular 14 升級(jí)到 Angular 15

?? 對(duì)于 Angular v15，將您的 Node.js 版本更新為 14.20.x、16.13.x 和 18.10.x 中的任何一個(gè)。
?? 在升級(jí)到 Angular 版本 15 之前將您的 TypeScript 版本更新到 4.8 或更高版本
。?? 運(yùn)行ng 更新 @angular/ core@15 @angular/ cli@15在應(yīng)用程序項(xiàng)目目錄中將您的應(yīng)用程序更新到 Angular 15
?? 然后，更新 Material 組件運(yùn)行ng 更新 @angular/ material@15
?? 對(duì)于版本 15，Angular 編譯器在@關(guān)鍵幀在具有組件范圍的 CSS 中。因此，TypeScript 代碼依賴于關(guān)鍵幀名稱在 v15 中不起作用。更新所有此類(lèi)實(shí)例以編程方式定義關(guān)鍵幀、使用全局樣式表或更改組件的視圖封裝。
?? 在tsconfig.json文件文件，刪除啟用常春藤因?yàn)樗?Angular 15 中唯一的渲染引擎，所以它不是必需的。
?? 在子類(lèi)繼承構(gòu)造函數(shù)并使用 DI 的基類(lèi)中使用裝飾器。這樣的基類(lèi)應(yīng)該用@Injectable 或@Directive否則，編譯器會(huì)顯示錯(cuò)誤。
?? 在 Angular 15 中，設(shè)置禁用狀態(tài)當(dāng)一個(gè)控件值訪問(wèn)器被附上。要避免使用相同的行為，請(qǐng)使用FormsModule.withConfig或者ReactiveFormsModule.withConfig.
?? 確保所有 ActivatedRouteSnapshot 對(duì)象都有一個(gè) title 屬性。在 v15 中，title 屬性是 ActivatedRouteSnapshot 的必需屬性。
?? 在 Angular 15 版本中，relativeLinkResolution 在 Router 中是不可配置的。它用于選擇退出現(xiàn)在標(biāo)準(zhǔn)的早期錯(cuò)誤修復(fù)。
?? 更改實(shí)例DATE_PIPE_DEFAULT_TIMEZONE要使用的令牌DATE_PIPE_DEFAULT_OPTIONS用于時(shí)區(qū)配置。在版本 15 中，DATE_PIPE_DEFAULT_TIMEZONE令牌已棄用。
?? 現(xiàn)有的 <iframe> 實(shí)例可能將安全敏感屬性作為屬性或?qū)傩越壎☉?yīng)用于它們。這些安全敏感屬性可以出現(xiàn)在模板或指令的主機(jī)綁定中。此類(lèi)事件需要更新以確保符合關(guān)于 <iframe> 綁定的新的和更嚴(yán)格的規(guī)則。
?? 更新實(shí)例噴油器.get()使用 InjectFlags 參數(shù)來(lái)使用 InjectOptions 參數(shù)。Injector.get() 的 InjectFlags 參數(shù)在 v15 中已棄用。
?? 更新實(shí)例TestBed.注入（）使用 InjectFlags 參數(shù)來(lái)使用 InjectOptions 參數(shù)。Angular 15 棄用了 TestBed.inject() 的 InjectFlags 參數(shù)
。?? 使用 providedIn: ngModule@Injectable 和 InjectionToken在版本 15 中已被棄用
。?? 使用 providedIn: 'any' 作為一個(gè)@Injectable 或 InjectionToken在 v15 中已棄用。
?? 更新 RouterLinkWithHref 指令的實(shí)例以使用 RouterLink 指令。RouterLinkWithHref 指令在版本 15 中已棄用。
?? 在 Angular Material v15 中，許多組件已重構(gòu)為基于官方 MDC，這會(huì)影響許多組件的 DOM 和 CSS 類(lèi)。
?? 將應(yīng)用程序更新到 Angular 15 后，目視檢查您的應(yīng)用程序及其交互，以確保所有功能和應(yīng)用程序的順利運(yùn)行。

結(jié)論

（言鼎科技）專(zhuān)做軟件開(kāi)發(fā),微信小程序,網(wǎng)站開(kāi)發(fā),軟件外包,手機(jī)APP開(kāi)發(fā)，歡迎資訊！