最受欢迎的开源前端框架 Angular 终于推出了另一个版本更新——Angular 15。之前，Angular 14引入了许多新的令人兴奋的实验性功能和排列的代码最佳实践，但看起来这个新版本——在 Angular 版本 15 中，一切都是为了获得稳定性。

最后，一个新的稳定更新，我们所有的技术爱好者和 Angular 社区都在等待。这个新的更新带来了巨大的激动人心的变化。那么，让我们深入了解 Angular 15 的新世界。

Angular 15 引入了哪些新特性？

参考之前的其他更新和 Angular 遗留编译器的删除，Angular 15 更新带来了许多新的改进——稳定性和扩展的支持能力，这无疑有望提升开发人员的体验和性能。

1.稳定的独立组件API

Angular 14 中引入了独立组件 API，用于构建 Angular 应用程序而无需定义. 在 Angular 15 中，独立组件 API 经过全面的性能观察和修正后终于达到了稳定的程度。 NgModules

Angular 开发者社区已经确保有了这种新近实现的稳定性，独立组件可以与HttpClient、Angular Elements 和许多其他组件同步工作。

使用这个独立的 API 在单个组件中引导应用程序。这是如何完成的：

import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from'./image-grid';

@Component({
 standalone: true,
 selector: 'photo-gallery',
 imports: [ImageGridComponent],
 template: `
   … <image-grid [images]="imageList"></image-grid>
 `,
})
export class PhotoGalleryComponent {
 // component logic
}

bootstrapApplication(PhotoGalleryComponent);

使用该imports函数，您甚至可以引用独立的指令和管道。

您现在可以将组件、指令和管道标记为“ standalone: true”——现在，无需将它们声明到 NgModule 中，否则 Angular 编译器将抛出错误。此外，您现在可以通过编写import: [module_name].

2. 开发多路由应用的使能

Angular 15 带有一个路由器独立 API 来构建多路由应用程序。以下是声明根路由的方法：

export const appRoutes: Routes = [{
 path: 'lazy',
 loadChildren: () => import('./lazy/lazy.routes')
   .then(routes => routes.lazyRoutes)
}];

在这里，lazyRoutes 通过以下方式声明：

import {Routes} from '@angular/router';

import {LazyComponent} from './lazy.component';

export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

您可以appRoutes在方法中注册并使用可摇树优化的 APIbootstrapApplication调用它！ProvideRouter

bootstrapApplication(AppComponent, {
 providers: [
   provideRouter(appRoutes)
 ]
});

此外，Angular Bundlers 现在可以在构建时删除未使用的功能，这可以使代码文件大小减少 11%。

3. Directive Composition API介绍

当他们最喜欢的框架提供一流的指令可重用性时，所有开发人员都会喜欢。在 GitHub 社区中，许多Angular 开发人员都在请求这个 API，最终，团队听到了并使之成为可能。

因此，Angular v15 最终注入了来自GitHub 上的功能请求的灵感。它引入了 Directive Composition API，提升了代码的可用性并将其提升到另一个层次。它允许开发人员使用指令提升宿主元素，并在最终代码重用策略的帮助下充分利用 Angular。此外，所有这些都可以在 Angular 编译器的帮助下实现。

注意：您只能将 Directive Composition API 与独立指令一起使用。

@Component({
 selector: 'mat-menu',
 hostDirectives: [HasColor, {
   directive: CdkMenu,
   inputs: ['cdkMenuDisabled: disabled'],
   outputs: ['cdkMenuClosed: closed']
 }]
})
class MatMenu {}

正如您在上面看到的，在MatMenu两个 hostDirectives 的帮助下使 变得有效：HasColor和CdkMenu。

由于此增强功能，MatMenu可以重新利用这两个指令的所有属性。MatMenu 可以继承与 HasColor 指令关联的输入、输出和逻辑，并且只能继承来自CdkMenu.

对于多重继承概念，它可能会给你一种似曾相识的感觉。Angular 与其他编程语言的不同之处在于名称冲突的解决，它只适用于用户界面原语。

4.稳定的“NgOptimizedImage”图像指令

该NgOptimizedImage指令是在以前的版本中引入的，以便轻松采用加载图像性能的最佳实践。最后，经过开发者长时间的观察，这个指令已经达到了稳定的形式。Land's End
对一个应用程序使用此功能进行的最新实验观察到 LCP（最大内容绘画）图像加载提高了 75%。

以前，这NgOptimizedImage也提供了许多特性和功能，但是 Angular v15 更新在图像指令中添加了更多新的令人兴奋的特性，如下所示：

1. 自动srcset生成：它自动生成 srcset，确保在请求时上传适当大小的图像——从而减少图像下载时间。

2. 填充模式 [实验]：它消除了声明图像尺寸并将图像填充到其父容器的需要。当您不知道图像尺寸或者您需要迁移 CSS 背景图像以使用图像指令时，此模式非常有效。

但问题是，“如何使用这个独立的 NgOptimizedImage 指令？”

它可以直接用于您的 Angular 组件或NgModule.

import { NgOptimizedImage } from '@angular/common';

// Include it into the necessary NgModule
@NgModule({
 imports: [NgOptimizedImage],
})
class AppModule {}

// ... or a standalone Component
@Component({
 standalone: true
 imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}

在组件中使用此 Angular 图像指令时，您需要做的就是将图像src属性替换为ngSrc，同时确保指定优先级属性以优化 LCP 图像的速度。

5. 现在你可以减少 Guards 中的样板代码

让我们通过一个定义守卫、验证细节的例子更好地理解这个概念——无论用户是否登录：

@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
 constructor(private loginService: LoginService) {}

 canActivate() {
   return this.loginService.isLoggedIn();
 }
}

const route = {
 path: 'somePath',
 canActivate: [MyGuardWithDependency]
};

这里，在这个程序中，LoginService包含了主要逻辑，其中守卫——只调用了一个触发器，它是  isLoggedIn (). 尽管有如此清晰的结构，但这段代码有很多样板，必须减少。

多亏了 Functional Router Guards，这段代码可以用必要的样板重构为下面给出的代码。

const route = {
 path: 'admin',
 canActivate: [() => inject(LoginService).isLoggedIn()]
};

Functional Guards 最好的一点是它们是可堆肥的。在它的帮助下，您可以构建类似因子的函数，接受给定的配置并返回解决问题的守卫或函数。

6. 更清晰、更好的堆栈跟踪

随着 Angular v15 的更新，调试 Angular 应用程序已经得到简化，并通过堆栈跟踪变得更加清晰和直接。Angular 开发人员团队确保实现一个标准来跟踪更多的开发代码，而不是显示它调用的库。这一成就使得错误消息可以使用一些改进。

在使用以前的 Angular 版本之前，当发现代码时，开发人员通常会收到一行错误消息，导致他们需要一个漫长的过程来解决该错误。

以下是先前错误指示的片段：

ERROR Error: Uncaught (in promise): Error
Error
   at app.component.ts:18:11
   at Generator.next (<anonymous>)
   at asyncGeneratorStep (asyncToGenerator.js:3:1)
   at _next (asyncToGenerator.js:25:1)
   at _ZoneDelegate.invoke (zone.js:372:26)
   at Object.onInvoke (core.mjs:26378:33)
   at _ZoneDelegate.invoke (zone.js:371:52)
   at Zone.run (zone.js:134:43)
   at zone.js:1275:36
   at _ZoneDelegate.invokeTask (zone.js:406:31)
   at resolvePromise (zone.js:1211:31)
   at zone.js:1118:17
   at zone.js:1134:33

理解这些错误片段的困难在于：

1. 错误消息输入来自第三方依赖项（Angular 框架、zone.js 和 RxJS）
2. 没有关于哪个用户交互遇到此错误的信息。

经过与 Angular 和 Chrome DevTool 团队的长期合作，社区能够集成这些第三方依赖项（在 node_modules、zone.js 等的帮助下）；因此，可以实现链接堆栈跟踪。

堆栈跟踪的改进如下所述：

ERROR Error: Uncaught (in promise): Error
Error
   at app.component.ts:18:11
   at fetch (async) 
   at (anonymous) (app.component.ts:4)
   at request (app.component.ts:4)
   at (anonymous) (app.component.ts:17)
   at submit (app.component.ts:15)
   at AppComponent_click_3_listener (app.component.html:4)

现在，这些错误消息提供了从哪里遇到错误的信息，因此开发人员可以直接转到该代码部分并立即修复它。

7. 稳定的基于 MDC 的组件

由于考虑到 Angular 材料的稳定性，Angular 开发团队努力基于 Web 应用程序的 Angular Material Design Components 重构其组件。此外，这些组件得到了增强，以提供更好的可访问性和对 Angular Material Design 规范的遵守。

在这里，大部分重构工作已经在 DOM 和 CSS 部分完成。随着新的响应式更新，旧的 Angular 应用程序中的一些样式需要调整，特别是在 CSS 覆盖迁移组件的内部元素的情况下。

在最新的 Angular v15 中，许多组件的旧实现已被弃用。因此，要恢复它们，开发人员仍然可以选择“遗留”导入。

例如，您可以mat-button通过导入其遗留按钮模块来检索旧实现。

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

8.CDK 列表框

CDK 代表组件开发工具包，它提供不同的行为原语，帮助构建 UI 组件。在 Angular v15 中，它获得了一个名为 CDK Listbox 的新原语，使开发人员能够根据需要自定义由 WAI-ARIA Listbox 模式绘制的 Listbox 交互。

在这里，行为交互包括键盘交互、bidi 布局支持和焦点管理。无论您使用其中的哪一个，每个指令都带有关联的 ARIA 角色和各自的宿主元素。

9. 扩展的 esbuild 支持

在 Angular 14 更新中，启用了实验性支持 esbuild——一个更快的 javascript 捆绑器，可以通过简化管道来快速完成构建。

Angular 15 为ng build --watchSass、SVG 模板和文件替换提供了新的实验性支持。升级 angular.json构建器的命令是：

"builder": "@angular-devkit/build-angular:browser-esbuild"

10. Angular 15 功能的其他增强

下面列出了 Angular 15 中的新增强功能和启用功能，它们可能看起来很小但影响很大。

• Router Now Auto-Unwarps Default Exports for Lazy Loading：它通过添加更多支持来减少更多样板文件，从而简化了路由器功能。在这里，对于延迟加载，路由器将查找默认导出，如果成功，它会直接将其延迟文件导入到代码中。

• 自动导入语言支持服务——快速修复：现在，通过充分利用语言服务，更自信地编写 Angular 代码。您可以使用此功能自动导入模板中的组件及其修复，这些组件未在独立组件或 NgModule 中使用。

• 改进的 Angular 组件：Angular 组件的 v15 涵盖了一系列可访问性增强功能，包括有效对比度、扩展的触摸目标大小和改进的 ARIA 语义。此外，Angular 组件可以使用它们的 API 来定制它们的密度，以获得更好的主题定制体验。

这都是关于 Angular v15 中启用的新修正和成就，但问题是，“你将如何解锁这些 Angular 15 功能？”

如何升级到 Angular 15？

在升级到 Angular v15 之前，您必须了解支持扩展、取消和弃用——重大更改，以审查和重构您现有的 Angular 构建。

• Angular v15 扩展了对 node.js 14.20.x、16.13.x 和 18.10.x 版本的支持，并终止了对 14.[15-19].x 和 16[10-12].x 等版本的支持。
• Angular 15 现在仅支持 TypeScript 4.8 或更早版本。
• 在应用程序项目目录中，运行命令：ng update @angular/core@15 @angular/cli@15使您的应用程序得到 Angular v15 支持的强化。
• @keyframes 名称格式已更改为“ ”@keyframes host-my-cmp_foo { ... }
  • 为了符合这一重大变化：
    • 将组件的封装视图更改为 None 或 ShadowDom。
    • 在全局样式表中定义此规则
    • 在您自己的代码中定义此规则。

• 向类添加显式构造函数可能会触发错误。
• 在 tsconfig.json 文件中，enableIvy调用已被删除，因为在此更新中，Ivy 只是一个渲染引擎。
• 该canParse方法已被删除，因此现在必须在解析方法中使用analyze和参数。hint
• RouterOutlet只会在变更检测完成后实例化组件。
• 该DATE_PIPE_DEFAULT_TIMEZONE功能已被删除，所以从现在开始，您需要使用它的替代品DATE_PIPE_DEFAULT_OPTIONS来定义时区。
• 该routerLinkWithHref指令已被删除，因此从现在开始，您需要使用该RouterLink指令来处理具有href属性的元素。

好吧，还有其他方法和指令已被删除并使用新的简化语法结构进行了更新。因此，最好使用Angular v14 到 v15 的迁移指南，以确保更顺利的应用程序迁移。

使用以下命令将 Angular 14 更新到 Angular 15：

ng update @angular/cli @angular/core

在 CLI 中编写下面提到的命令来更新你的全局 Angular：

npm i -g @angular/cli

结束语

在 2020 年推出 Ivy 的决定是最好的决定，因为它带来了很多改进——NgModules 就是其中之一。这种改进有助于简化学习曲线。

Angular 团队正致力于对服务器端渲染管道进行更多改进，下一步是提高代码可重用性，以提高 Angular 的效率。

所以，让我们升级到 Angular v15 并等待新的令人兴奋的更新来认识它。