Angular 16 正式发布,抢先体验指南
上周,Angular 正式发布了 v16 版本。这个版本带来了许多功能和变化,比我们之前看到的任何一个主要版本都要多(当然,不包括从 Angular 到 Angular 2 的转变)。Angular 正在经历一种复兴,而 v16 只是个开始。
Angular v16 的新特性包括:全新 Reactivity 模 型的开发者预览,完全向后兼容,Angular Signals 库,RXS 互操作性;服务器端渲染和 hydration 增强;改进独立组件、指令和管道的工具等。
本文将带您了解如何将 Angular 应用程序更新至 v16 版本。
关于本文内容的概括汇总,以及将 Angular 应用程序更新至 v16 的分步过程,请参阅 Angular 更新指南(https://update.angular.io/)。
本文列出的 Angular 更新指南及相关信息,摘录自以下变更日志。
angular/angular changelog:https://github.com/angular/angular/blob/main/CHANGELOG.md
angular/angular-cli changelog:https://github.com/angular/angular-cli/blob/main/CHANGELOG.md
angular/components changelog:https://github.com/angular/components/blob/main/CHANGELOG.md
如有需求,可参考此前发布的“更新至 v15”:https://angular.io/guide/update-to-version-15
全面的新功能列表,请参阅关于 v16 Angular 博文更新。
https://blog.angular.io/
此版本包含 Angular 新响应式基元的首个开发者预览,分别为:signal, computed 和 effect。关于详细信息,请参阅 Signals 指南。
https://angular.io/guide/signals
更多背景信息,请参阅 Angular Signals RFC。
https://github.com/angular/angular/discussions/49685
此前,当 Angular 在服务器端渲染或编译时预渲染的页面上启动时,该框架会丢弃一切现有 DOM 节点并从头开始重新渲染。借助 v16 的增强 hydration 功能,现在您可以指定 Angular 重用这些现有 DOM 节点。关于更多细节信息,请参阅完整的 hydration 指南。
https://angular.io/guide/hydration
v16 带来了基于 esbuild 的全新 Angular CLI 构建器开发者预览版。这种新架构能够在多种场景下显著缩短构建时间。该预览版还与 Vite 相集成以支持 CLI 的开发服务器。
更新 angular.json 即可体验这一全新构建设置:
content_copy"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser-esbuild",
为了支持开发人员将自己的应用程序转换为独立 API,Angular v16 引入了迁移图表和独立的迁移指南。这些工具大大减少了将代码迁移至独立组件、指令和管道所需要的工作量。关于详细信息,请参阅独立迁移指南。
https://angular.io/guide/standalone-migration
通过以下命令生成具有独立组件的新 Angular 应用程序:
ng new --standalone
按照需要标记组件和指令输入:
export class ColorPicker {
@Input({ required: true }) defaultColor: string;
}
如果模板中包含一个组件,但没有指定其所有必需输入,Angular 会在构建过程中报告错误。
关于重大变更的完整列表,请参阅 GitHub 上的完整变更日志。
Angular 需要配合 node.js v16 或 v18 版本使用。PR #47730
关于兼容性的完整说明信息,请参阅版本兼容性页面。
https://angular.io/guide/versions
Angular v16 不再支持 4.9 之前的较早 TypeScript 版本。PR #49155
关于兼容性的完整说明信息,请参阅版本兼容性页面。
Angular 兼容性编译器(ngcc)是一种构建工具,用于促进 Angular 之前的编译器及渲染架构(View Engine)与其新架构(Ivy)之间的兼容性。
View Engine 已在 Angular v13 中被移除,v16 则最终移除了 ngcc。因此,现在已无法在 Angular v16+ 版本中使用由 View Engine 构建的 Angular 库。
Angular 包格式(APF)现已更新,具体包含以下变更:
Flattened ESM 2015 (FESM2015) 输出已被移除。
EcmaScript 2020 输出已更新至 EcmaScript 2022(包括扁平化输出)。
关于背景信息,请参阅 Angular 包格式页面。
https://angular.io/guide/angular-package-format
ReflectiveInjector 及相关符号已被移除。请更新代码以避免引用 ReflectiveInjector 符号。作为替代方案,可以使用 Injector.create 创建注入器。
由于 Router.createUrlTree 现可在更多场景中正确起效,因此需要对模拟 ActivatedRoute 实例的测试做相应调整。具体来讲,这意味着使用无效 / 不完整的 ActivatedRoute 模拟进行的测试可能引发与此前不同的行为。另外,测试现可导航至真实 URL,不同于之前只能导航至根目录的情况。请确保在测试中提供相应的预期路由。虽然几乎不会对生产造成影响,但我们发现此前如果使用未出现在当前路由程序状态中的 ActivatedRoute,相关导航可能会被忽略。在创建正确的 URL 之后,应用程序中的导航行为可能会有所不同。在大多数情况下,仅使用空命令数组更新查询参数的导航时会引发这个问题,例如 router.navigate([], {relativeTo: route, queryParams: newQueryParams})。要加以解决,应移除其中的 relativeTo 属性。
以下 API 在 v16 中仍然可用,但可能会在未来版本中被移除,具体请参阅 Angular 弃用实践。
https://angular.io/guide/releases#deprecation-practices
为了保持 Angular 应用程序的可靠性,请尽可能始终快速更新应用程序。
如果你是 Angular 开发人员,或正在考虑将 Angular 用于下一个项目,了解这些新功能是必不可少的。其中一些功能是社区长期以来的需求。一些功能(如 Signal 和 SSR)让 Angular 与其他现代框架相媲美。随着 v17 中更多功能的推出,Angular 将与目前的版本有很大不同。考虑到 Angular 带来的变化,如果不及时更新,就无法利用这些新功能,你的代码库很快就会过时。
相关阅读:
好用的 Angular 组件库有哪些推荐的?TinyNG 好用吗?(https://xie.infoq.cn/article/ef69ee3c39df06f8fb1f5bb66)
2023 重学 Angular (https://xie.infoq.cn/article/7baec545b8202471064494a69)
前端架构三大巨头之一 Angular|深度讲解 (https://xie.infoq.cn/article/88dbb8553edf09d20a131d260)
AngularJS 进阶 (二十五)requirejs + angular + angular-route 浅谈 HTML5 单页面架构 (https://xie.infoq.cn/article/fd637cabb33b1ab82d5742dee )
点击底部阅读原文访问 InfoQ 官网,获取更多精彩内容!
从微服务转为单体架构、成本降低 90%,亚马逊内部案例引发轰动!CTO:莫慌,要持开放心态
比Python快35000倍!LLVM&Swift之父宣布全新编程语言Mojo:编程被颠覆了
拼多多回应将总部从中国迁至爱尔兰;微软Bing爆炸级更新,文生图原生支持中文;75岁人工智能教父离职谷歌,痛悔毕生工作| Q资讯
微信扫码关注该文公众号作者