Angular 17 的新特性

介绍

Angular 版本 17 于 2023 年 11 月 8 日发布，而这款应用对于这个可以追溯到 2016 年 9 月的框架来说，就像是一次重生。

首先，虽然我们谈到了“重生”，但我们指的并非对框架进行彻底重写。我们指的是添加利用最新浏览器特性的重要功能，使框架更加强大。

剩下的问题是：这次发布为何是Angular发展历程中的一个重大转折点？这次发布究竟有何特别之处？

全新品牌形象

在社交网络（例如 X 等最知名的平台）上，Angular 的标志消失了几天，取而代之的是一个问号。11 月 6 日星期一，Angular 团队宣布启用新的标志，并推出了一个全新的文档网站，可在此处访问。

这个全新的网站（API方面仍在建设中）带来了许多改进，例如：

• 能够在沙盒环境中试验各项功能
• 新增教程，并可选择在沙盒环境中创建教程。
• 按主题（组件、形式、可访问性、最佳实践等）进行全新组织。

请大胆尝试，并及时报告您遇到的任何问题或错误。

@Component 注解

@Component 注解已得到改进。自 Angular 诞生以来，必须传递样式数组或相对样式表路径数组才能将样式绑定到组件。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

通常情况下，视图会链接到样式表。

• 引入了一个新属性：styleUrl
• styles 属性的值可以是字符串或字符串数​​组。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {}

新版应用程序构建器

Angular 一直以来都提供不同的构建器来构建我们的应用程序。Angular 应用程序主要分为两种类型：

• 客户端渲染：整个应用程序都在客户端构建。换句话说，应用程序以 DOM（文档对象模型）格式表示。导航、数据获取和模板化都在客户端而非服务器端进行管理。
• 服务器端渲染：应用程序以 HTML 格式渲染，应用程序的每个页面都根据导航以 HTML 格式渲染，然后对页面进行重新水化，使其动态化。

根据应用程序类型的不同，构建器也不同。Angular
使用的构建器如下：

• 使用 @angular-devkit/build-angular:browser构建客户端渲染应用程序
• 使用 @nguniversal/builders:ssr-dev-server构建服务器端渲染应用程序。

随着 Angular 16 的发布，出现了一个新的实验性构建器：
@angular-devkit/build-angular:browser-esbuild。该构建器使得可以使用 vite 作为开发服务器，使用 esbuild 作为构建工具，并提供了卓越的性能：

• 应用程序构建收益达 87%
• 应用程序开发服务器上的性能提升了 82%。

然而，服务器端渲染的构建器却一直没有改变。
随着 Angular 17 的发布，一个全新的“通用”构建器应运而生。这个构建器允许你同时构建客户端渲染应用和服务端渲染应用。
让我们为这个构建器鼓掌：
@angular-devkit/build-angular:application

对于使用构建器 @angular-devkit/build-angular:browser-esbuild 的现有应用程序，迁移到新构建器相对简单。

对于服务器端渲染应用程序，由于需要更改的属性数量较多，迁移过程会稍微复杂一些。

新的 Angular 代码流程

Angular 17 的发布也带来了全新的、功能更强大的流程代码。
在之前的版本中，我们使用结构指令 ngIf、ngSwitch 和 ngFor 来管理页面结构。
结构指令功能强大，这得益于它们所采用的宏语法。然而，这种宏语法也有其局限性，因此我们创建了新的流程代码。

这段代码流程是怎样的？

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    @if(name === 'SFEIR'){
      <ul>
         @for(entity of entities; track entity.id) {
           <li>{{ entity.name }}</li>
         }@empty {
           No data
         }
      </ul>

    }@else {
      Name not correct
    }
  `
})
export class AppComponent {
  name = 'SFEIR';
  entities = [{ name: 'Luxembourg', id: 'LU' }];
}

如代码所示，无需导入 ngIf 和 ngFor 指令。这种新的代码流程已内置于 Angular 中，能够更轻松地基于 Angular 信号集成组件。

结构化指令目前并未弃用，也没有弃用的计划。
未来可能只会弃用 ngIf、ngFor 和 ngSwitch 指令。

如果您想自动将组件迁移到新的代码流程，这张原理图将是您的最佳帮手。

ng g @angular/core:control-flow 

警告：此新流程代码非常新，因此您可能会遇到一些格式问题。（Prettier 3.1 现在支持此代码流程）

集成开发环境（IDE）：

• VSCode 搭配 Angular 语言服务插件已经支持语法高亮显示。
• WebStorm EAP 也支持语法高亮显示。遗憾的是，目前尚不支持模板检查，但很快就会推出。

最受期待的功能：延迟

这可能是本次版本最重要的特性之一：能够轻松地实现组件的懒加载。

当然，我们以前也能做到这一点。多亏了 EsModules 和 *ngComponentOutlet 结构指令，我们才能实现组件的懒加载。然而，这种方法仍然存在一些问题，例如开发者必须考虑整个加载过程（加载、错误处理等等），而且其适用范围也有限（预取复杂等等）。简而言之，开发者的体验并不理想。

Angular 17引入了defer函数，它考虑到了延迟加载的所有阶段，使得组件的延迟加载变得容易。

@Component({
  selector: 'app-root',
  template: `
    <button type="button" #loadButton>Click Me</button>
    @defer(on interaction(loadButton)) {
      <app-lazy-component />
    }@placeholder {
      showed until the chunk file not begin to load
    }@loading {
      showed during the loading of the chunk
    }@error {
      showed if an error happen during loading
    }
  `
})
export class AppComponent {}

延迟、占位符、加载等还有许多其他选项。要充分利用此功能，我推荐阅读 Tomas Trajan 的这篇精彩文章（链接在此）。

就像所有美好的事物一样，你也不应该滥用它。延迟加载（defer）功能应根据你的需求以特定方式应用。一般来说，延迟加载主要取决于你的网络状况和需要延迟加载的组件的大小。最后但同样重要的是，此功能对于优化 Core Web Vitals 的 LCP 和 CLS 指标至关重要。

关于信号系统的一点说明

Signal 组件在 Angular 16 中以开发者预览版的形式发布。在 Angular 17 中，Signal 组件已稳定可用。
结合 `ChangeDetection.OnPush` 选项，您可以实现非常精确的响应式控制，仅刷新信号被修改的组件。

对信号进行 mutate 方法已不再可用。

特效目前仍处于开发者预览阶段。

Angular 开发工具

Angular Devtools 还新增了一个非常实用的小功能😄：现在可以查看依赖注入树了。这对于调试应用程序非常有用，尤其是在遇到循环依赖或令牌解析不正确的情况下。

结论

Angular 17 的确带来了许多新特性，从这个意义上讲，Angular 可以说是重生了。与之前的所有版本一样，Angular 17 没有引入任何破坏性变更，因此将应用程序从 Angular 16 迁移到 Angular 17 非常容易。

您不必使用所有这些新功能；它们是供开发人员试用的。