2

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

image.png

一,重新思考响应式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的开发者预览。

image.png

在新的完整应用非破坏性 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% 以上。

image.png

在 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 或语言服务中获得错误的次数是多少次,而实际上没有导入相应的实现?我猜应该是很多次。语言服务现在允许自动导入组件和管道。

1.gif

如上动图显示了 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


xiangzhihong
5.9k 声望15.3k 粉丝

著有《React Native移动开发实战》1,2,3、《Kotlin入门与实战》《Weex跨平台开发实战》、《Flutter跨平台开发与实战》1,2和《Android应用开发实战》