Angular 16 正式版发布

在之前的Angularv15中，Angular团队通过将独立API从开发者预览版升级至稳定版，在Angular的简易性和开发者体验方面达到了一个重要的里程碑。如今，Angular将继续这一改进的势头，发布了自Angular最初推出以来最大的一次版本更新；在Reactivity、服务器端渲染和工具方面取得了巨大的飞跃。

一，重新思考响应式Reactivity

作为v16版本的一部分，Angular带来了全新的Reactivity模型的开发者预览，它为性能和开发者体验带来了显著的改进。完全向后兼容并可与当前系统互操作的，并且提供了如下的一些功能：

• 通过减少变化检测过程中的计算次数，提高运行时的性能。
• 为Reactivity带来了更简单的mental模型，使其清楚地了解视图的依赖性和通过应用程序的数据流。
• 启用细粒度的Reactivity，在未来的版本中，它将允许我们只检查受影响组件的变化。
• 在未来的版本中，通过使用Signals在模型发生变化时通知框架，使Zone.js成为可选的。
• 提供计算属性，而不会在每个变化检测周期中重新计算。
• 实现了更好的与RxJS的互操作性。

1.1AngularSignals

AngularSignals库允许你定义Reactive值并表达它们之间的依赖关系。你可以在相应的RFC中了解更多关于库的特性。下面是一个如何将其与Angular一起使用的简单示例：

@Component({
  selector: 'my-app',
  standalone: true,
  template: `
    {{ fullName() }} <button (click)="setName('John')">Click</button>
  `,
})
export class App {
  firstName = signal('Jane');
  lastName = signal('Doe');
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
  constructor() {
    effect(() => console.log('Name changed:', this.firstName()));
  }
  setName(newName: string) {
    this.firstName.set(newName);
  }
}

如上代码段创建了一个计算属性值fullName,它依赖firstName和lastNamesignals，我们也声明了一个effect,它的回调函数将会在其读取的信号值每次更新时执行，也就是firstName更改时重新执行，以上的fullName计算属性意味着它会依赖firstName和lastName信号值的变化。当我们设置firstName为"John"时，浏览器会打印如下的日志：

"Namechanged:JohnDoe"

1.2RxJS互操作性

你将能够通过@angular/core/rxjs-interop中的函数轻松地将signals转换为observables，该函数作为v16开发预览版中的一部分。例如，下面是如何转换signal为observable的示例：

import { toObservable, signal } from '@angular/core/rxjs-interop';
@Component({...})
export class App {
  count = signal(0);
  count$ = toObservable(this.count);
  ngOnInit() {
    this.count$.subscribe(() => ...);
  }
}

下面是一个如何将observable的转换为signal以避免使用async管道的示例：

import {toSignal} from '@angular/core/rxjs-interop';
@Component({
  template: `
    <li *ngFor="let row of data()"> {{ row }} </li>
  `
})
export class App {
  dataService = inject(DataService);
  data = toSignal(this.dataService.data$, []);
}

Angular用户通常希望在相关Subject完成时完成一个流，以下模式非常常见：

destroyed$ = new ReplaySubject<void>(1);
data$ = http.get('...').pipe(takeUntil(this.destroyed$));
ngOnDestroy() {
  this.destroyed$.next();
}

接下来，我们介绍一种新的RxJS操作符takeUntilDestroyed，简单使用示例如下：

data$=http.get('…').pipe(takeUntilDestroyed());

默认情况下，此操作符将注入当前的清理上下文。假如在组件中使用，它将使用组件的生命周期。当你想要将Observable的生命周期与特定组件的生命周期联系起来时,takeUntilDestroy特别有用。而takeUntilDestroy是基于下文的DestroyRef实现的。

1.3signals下一阶段

接下来我们将研究基于信号组件，信号组件将会简化生命周期钩子函数以及一种简单的声明式输入(inputs)和输出(outputs)，我们还将编写一套更完整的示例和文档。

Angular仓储中最受欢迎的Issue是“Proposal:InputasObservable”。几个月前，我们回应说要支持这个特性为框架的一部分，我们很高兴与大家分享，今年晚些时候，我们将推出一项功能，该功能将启用基于信号的输入——你将能够通过interop包将输入转换为可观测值。

二、服务器端渲染和hydration增强

根据Angular的年度开发者调查，服务器端渲染是Angular的第一大改进方向。在过去的几个月里，Angular与ChromeAurora团队合作，改善了hydration和服务器端渲染的性能和DX。今天，Angular带来了完整应用非破坏性hydration的开发者预览。

在新的完整应用非破坏性 hydration 中，Angular 不再从头开始重新渲染应用。相反，该框架在构建内部数据结构时查找现有的 DOM 节点，并将事件监听器附加到这些节点上。这么做的好处是：

• 对终端用户来说，页面上没有内容的闪烁。
• 在某些情况下有更好的 Web Core Vitals。
• 面向未来的架构，可以用我们今年晚些时候推出的基元实现细粒度的代码加载。
• 只需几行代码就能与现有的应用程序轻松集成。
• 对于执行手动 DOM 操作的组件，在模板中使用 ngSkipHydration 属性逐步采用 hydration。

在早期测试中，我们看到 Largest Contentful Paint 通过全应用程序 Hydration 作用提高了45%。一些应用已经在生产中实现了 Hydration，并报告了 CWV 的改进：开始体验只需要在main.ts中添加如下几行代码即可。

import {
  bootstrapApplication,
  provideClientHydration,
} from '@angular/platform-browser';
...
bootstrapApplication(RootCmp, {
  providers: [provideClientHydration()]
});

2.1 新的服务器端渲染特性

作为 v16 版本的一部分，我们还更新了 Angular Universal 的 ng-add 原理图，使你能够使用独立 API 将服务器端渲染添加到项目中。我们还为内联样式引入了对更严格的 内容安全策略的支持。

2.2 Hydration 和服务端渲染的下一步

v16 中的工作只是一块垫脚石，我们计划在这里做更多的工作。在某些情况下，有机会延迟加载对页面不重要的 JavaScript，并在以后对相关组件进行 Hydrate。这种技术被称为部分 Hydrate，我们将在下一步对其进行探索。

自从 Qwik 从谷歌的封闭源代码框架 Wiz 中推广了可恢复性的想法以来，我们在 Angular 中收到了许多关于这一功能的请求。可恢复性肯定在我们的路线图上，我们正在与 Wiz 团队密切合作，探索更多的空间。我们对它所带来的开发人员体验的限制持谨慎态度，评估不同的权衡，并将在我们取得进展时随时向你通报。

你可以通过阅读 “What’s next for server-side rendering in Angular” 查看更多未来的计划。

三、改进对独立组件/指令/管道的工具

Angular 是一个被数百万开发人员用于许多关键使命的应用程序框架，我们认真对待重大变更，我们 几年前 就开始探索独立的 APIs，2022 年我们在开发者预览下发布了它们，现在，经过一年多的收集反馈和对 APIs 的迭代，我们希望被更广泛的采用！

为了支持开发人员将其应用程序转换为独立 APIs，我们开发了迁移原理图和独立组件迁移指南，你进入项目执行如下命令：

ng generate @angular/core:standalone

原理图将转换你的代码，删除不必要的 NgModules类，最后将项目的引导程序更改为使用独立的 APIs。

3.1 独立ng new集

作为 Angular v16 的一部分，你可以一开始就创建一个新的独立项目，要尝试独立 APIs 原理图的开发预览版，请确保你在 Angular CLI v16 上并运行：

ng new --standalone

你将在没有任何NgModules的情况下获得更简单的项目目录，此外，项目中的所有生成器都将生成独立的指令、组件和管道。

3.2 配置 Zone.js

在独立 APIs 首次发布后，我们从开发人员那里听说，希望能够使用新的 bootstrapApplication API 来配置 Zone.js。我们通过 provideZoneChangeDetection 添加了一些选项：

bootstrapApplication(App, {
  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
});

3.3 基于 esbuild 的构建系统的开发预览版

一年多前，我们宣布正在 Angular CLI 中对 esbuild 进行实验性支持，以加快构建速度。今天，我们很高兴与大家分享，在 v16 中，我们基于 esbuild 的构建系统进入了开发预览版！ 早期测试显示，冷生产环境构建改善了 72% 以上。

在 ng serve 中，我们现在使用 Vite 作为开发服务器，esbuild 提供在开发和生产环境的构建。

我们想强调的是，Angular CLI 完全依赖 Vite 作为开发服务器。为了支持选择器匹配，Angular 编译器需要维护组件之间的依赖关系图，这需要与 Vite 不同的编译模型。你可以通过更新 angular.json 来尝试 Vite + esbuild :

...
"architect": {
  "build": {                     /* Add the esbuild suffix  */
    "builder": "@angular-devkit/build-angular:browser-esbuild",
...

接下来，在我们将这一特性从开发者预览提升到正式版之前，我们将解决对 i18n 的支持问题。

3.4 自动完成模板中的导入

你使用模板中的组件或管道从 CLI 或语言服务中获得错误的次数是多少次，而实际上没有导入相应的实现？我猜应该是很多次。语言服务现在允许自动导入组件和管道。

如上动图显示了 VSCode 中 Angular 语言服务的自动导入功能。

四、改善开发者体验

除了我们重点关注的大型计划外，我们还致力于引入备受要求的功能。

4.1 输入必填（Required inputs）

自从我们在 2016 年引入 Angular 以来，如果不为特定输入指定值，就不可能出现编译时错误。由于 Angular 编译器在构建时执行检查，因此此更改在运行时增加了零开销，多年来，开发人员一直在要求这个功能，我们得到了一个强有力的指示，这将非常方便！在 v16 中，可以根据需要标记输入为 required ：

@Component(...)
export class App {
  @Input({ required: true }) title: string = '';
}

4.2 将路由器数据作为组件输入进行传递

路由的开发经验一直在快速发展，GitHub 上一个 流行的功能请求 是要求能够将路由参数绑定到相应组件的输入。我们很高兴与大家分享这一功能现已作为 v16 版本的一部分提供。现在，可以将以下数据传递给路由组件的输入：

• 路由 data — resolvers 和 data 属性
• Path 参数
• Query 参数

以下是如何访问路由 resolver 数据的示例：

const routes = [
  {
    path: 'about',
    loadComponent: import('./about'),
    resolve: { contact: () => getContact() }
  }
];
@Component(...)
export class About {
  // The value of "contact" is passed to the contact input
  @Input() contact?: string;
}

4.3 CSP 对内联样式的支持

Angular 在组件样式的 DOM 中包含的内联样式元素违反了默认 style-src 内容安全策略（CSP） 。要解决此问题，它们应该包含一个 nonce 属性，或者服务器应该在 CSP 头中包含样式内容的哈希。尽管在谷歌，我们没有发现针对该漏洞的有意义的攻击向量，但许多公司实施了严格的 CSP，导致 Angular 仓储上的 功能请求 广受欢迎。

在 Angular v16 中，我们实现了一个跨越框架、Universal、CDK、Material 和 CLI 的新功能，该功能允许你为 Angular 内联的组件的样式指定 nonce 属性。有两种方法可以指定 nonce：使用 ngCspNonce 属性或通过 CSP_NONCE 注入令牌。

如果您有权访问服务器端模板，则 ngCspNonce 属性非常有用，该模板可以在构造响应时将 nonce 添加到标头和 index.html 中。

<html>
<body>
  <app ngCspNonce="{% nonce %}"></app>  
</body>
</html>

另一种方法是通过CSP_NONCE注入令牌指定 nonce。如果你在运行时可以访问 nonce，并且希望能够缓存 index.html，请使用此方法：

import {bootstrapApplication, CSP_NONCE} from '@angular/core';
import {AppComponent} from './app/app.component';
bootstrapApplication(AppComponent, {
  providers: [{
    provide: CSP_NONCE,
    useValue: globalThis.myRandomNonceValue
  }]
});

4.4 灵活的 ngOnDestroy

Angular 的 Lifecycle Hooks 提供了大量的功能，可以插入应用程序执行的不同时刻，如何实现更高的灵活性是一种机会和选择，例如，提供对 OnDestroy as an observable 访问作为一种可观察的方式。

在 v16 中，我们使 OnDestroy 可以被注入，此功能实现了开发人员一直要求的灵活性。新功能允许你注入与组件、指令、服务或管道相对应的DestroyRef ，并注册onDestroy 生命周期钩子函数。DestroyRef 可以被注入到注入上下文中的任何位置，包括组件之外 —— 在这种情况下，当相应的注入器被销毁时，ngDestroy 钩子就会被执行：

import { Injectable, DestroyRef } from '@angular/core';
@Injectable(...)
export class AppService {
  destroyRef = inject(DestroyRef);
  destroy() {
    this.destroyRef.onDestroy(() => /* cleanup */ );
  }
}

4.5 自动关闭标签 (Self-closing tags)

我们最近实现的一个 备受要求的功能 ，允许你对 Angular 模板中的组件使用自闭标签，这是一个小的开发体验改进，可以为你节省一些打字时间。比如：

<super-duper-long-component-name [prop]="someVar"></super-duper-long-component-name>
//替换为
<super-duper-long-component-name [prop]="someVar" />

4.6 更好、更灵活的组件

在过去的几个季度里，我们与谷歌的 Material Design 团队密切合作，为 Angular Material 的 Web 提供了 Material 3 实现。我们在 2022 年交付的基于 MDC Web 的组件为这项工作奠定了基础。

作为下一步，我们正在努力在今年晚些时候推出一个基于 expressive token-based 的主题化 API，该 API 支持 Angular Material 组件的更高定制。

提醒一下，我们将在 v17 中删除遗留的、非基于 MDC 的组件，请确保你按照我们的 迁移指南 进行迁移，以获得最新版本。

参考文档：

https://blog.angular.io/angular-v16-is-here-4d7a28ec680d