Angular 16 正式版发布

xiangzhihong

发布于 2023-05-07 21:25:59

2.5K0

发布于 2023-05-07 21:25:59

文章被收录于专栏：向治洪

在之前的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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-05-05，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度