Angular 15 现已上线：所有新功能、代码实践更改和弃用信息！

最受欢迎的开源前端框架 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 并等待新的令人兴奋的更新来认识它。