在過去的一年里，Angular 團(tuán)隊(duì)刪除了 Angular 的傳統(tǒng)編譯器和渲染管道，因此在過去幾個(gè)月里 Angular 改進(jìn)了一系列與開發(fā)者體驗(yàn)相關(guān)的內(nèi)容。Angular v15 則是進(jìn)一步推動(dòng)了這項(xiàng)工作，它有幾十項(xiàng)改進(jìn)，使開發(fā)者有更好的體驗(yàn)和性能。

獨(dú)立 API 脫離開發(fā)者預(yù)覽版

在 Angular 14 中，引入了新的獨(dú)立 API，使開發(fā)者能夠在不使用 NgModules 的情況下構(gòu)建應(yīng)用程序。如今在 Angular 15 中，這些 API 已經(jīng)脫離了開發(fā)者預(yù)覽，現(xiàn)在是穩(wěn)定的 API 的一部分。從現(xiàn)在開始，我們將按照語義版本的方式逐步改進(jìn)它們。

Directive composition API

指令組合式 API（Directive composition API） 將代碼重用帶到了另一個(gè)層次，這項(xiàng)功能的靈感來自于 GitHub 上最受歡迎的功能請(qǐng)求（feature request），該請(qǐng)求要求提供向宿主元素（Host Element）添加指令的功能。 指令組合式 API 使開發(fā)者能夠用指令來增強(qiáng)宿主元素，并為 Angular 配備了強(qiáng)大的代碼重用策略，指令組合 API 只適用于獨(dú)立的指令。

Image 指令現(xiàn)在穩(wěn)定了

在 Angular 14.2 中，Angular 帶來了與 Chrome Aurora 合作開發(fā)的 Angular image 指令的開發(fā)者預(yù)覽版。

如今在 Angular 15 中，該指令現(xiàn)在已經(jīng)達(dá)到穩(wěn)定了，Land's End 對(duì)這一功能進(jìn)行了實(shí)驗(yàn)，在 lighthouse lab 測試中觀察到 LCP 有 75% 的改善。

更好的堆棧跟蹤

Angular 團(tuán)隊(duì)從每年的開發(fā)者調(diào)查中得到了很多啟示，在深入研究開發(fā)者面臨的調(diào)試難題后，團(tuán)隊(duì)發(fā)現(xiàn)錯(cuò)誤信息可能需要得到一些改進(jìn)。

餅狀圖顯示，大多數(shù)開發(fā)者在理解 Angular 中的錯(cuò)誤信息時(shí)都很困難。因此 Angular 與 Chrome DevTools 合作來解決這個(gè)問題。 示例：

ERROR Error: Uncaught (in promise): Error Error at app.component.ts11 at Generator.next () at asyncGeneratorStep (asyncToGenerator.js1) at _next (asyncToGenerator.js1) at _ZoneDelegate.invoke (zone.js26) at Object.onInvoke (core.mjs33) at _ZoneDelegate.invoke (zone.js52) at Zone.run (zone.js43) at zone.js36 at _ZoneDelegate.invokeTask (zone.js31) at resolvePromise (zone.js31) at zone.js17 at zone.js33這個(gè)片段有兩個(gè)主要問題：

只有一行對(duì)應(yīng)于開發(fā)人員編寫的代碼。其他一切都來自第三方依賴項(xiàng)（Angular 框架、Zone.js、RxJS）

沒有關(guān)于導(dǎo)致錯(cuò)誤的用戶交互的信息

Chrome DevTools 團(tuán)隊(duì)創(chuàng)建了一種機(jī)制，通過 Angular CLI 注釋 source maps 來忽略來自node_modules的腳本。還合作開發(fā)了一個(gè)異步堆棧標(biāo)記 API，允許我們將獨(dú)立的、預(yù)定的異步任務(wù)連接成一個(gè)堆棧跟蹤。

將基于 MDC 的組件發(fā)布到穩(wěn)定版

我們很高興地宣布，基于 Material Design Components for Web（MDC）的 Angular material 組件的重構(gòu)工作已經(jīng)完成。這一變化使 Angular 更加接近 Material Design 規(guī)范。 對(duì)于許多組件，Angular 更新了樣式和 DOM 結(jié)構(gòu)，而其他組件則從頭開始重寫了。Angular 為新組件保留了大部分 TypeScript API 和組件 / 指令選擇器，與舊的實(shí)現(xiàn)方式相同。

實(shí)驗(yàn)性 esbuild 支持的改進(jìn)

在 Angular 14 中，Angular 帶來了在ng build中實(shí)驗(yàn)性地支持 esbuild，以實(shí)現(xiàn)更快的構(gòu)建時(shí)間并簡化 Angular 管道。 在 v15 中，現(xiàn)在有了實(shí)驗(yàn)性的 Sass、SVG 模板、文件替換和ng build --watch支持。

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

語言服務(wù)現(xiàn)在可以自動(dòng)導(dǎo)入你在模板中使用但沒有添加到獨(dú)立組件或 NgModule 中的組件。

CLI 改進(jìn)

在 Angular CLI 中，引入了對(duì)獨(dú)立穩(wěn)定 API 的支持。現(xiàn)在你可以通過ng g component --standalone生成一個(gè)新的獨(dú)立組件。 Angular 也在進(jìn)行簡化ng new輸出的任務(wù)。作為第一步，通過刪除test.ts、polyfills.ts和environments來減少配置。現(xiàn)在你可以直接在angular.json中的polyfills部分指定你的 polyfills。

"polyfills": [ "zone.js" ]為了進(jìn)一步減少配置開銷，現(xiàn)在使用.browserlist來讓你定義目標(biāo) ECMAScript 版本。

社區(qū)貢獻(xiàn)

自 v14 發(fā)布以來，Angular 收到了 210 多人對(duì)框架、組件和 CLI 的貢獻(xiàn)。