关于前端:Angular-16-正式版发布

41次阅读

共计 7137 个字符,预计需要花费 18 分钟才能阅读完成。

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

正文完
 0