Redian新闻
>
Angular 16 正式发布,抢先体验指南

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

Angular v16 中的功能亮点

全面的新功能列表,请参阅关于 v16 Angular 博文更新。

https://blog.angular.io/

Angular Signals 开发者预览

此版本包含 Angular 新响应式基元的首个开发者预览,分别为:signal, computed 和 effect。关于详细信息,请参阅 Signals 指南。

https://angular.io/guide/signals

更多背景信息,请参阅 Angular Signals RFC。

https://github.com/angular/angular/discussions/49685

增强 hydration 开发者预览

此前,当 Angular 在服务器端渲染或编译时预渲染的页面上启动时,该框架会丢弃一切现有 DOM 节点并从头开始重新渲染。借助 v16 的增强 hydration 功能,现在您可以指定 Angular 重用这些现有 DOM 节点。关于更多细节信息,请参阅完整的 hydration 指南。

https://angular.io/guide/hydration

使用 esbuild 开发者预览版加快构建速度

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 会在构建过程中报告错误。

Angular v16 中的重大变更

关于重大变更的完整列表,请参阅 GitHub 上的完整变更日志。

Angular v16 需要配合 node.js v16 或 v18 使用

Angular 需要配合 node.js v16 或 v18 版本使用。PR #47730

关于兼容性的完整说明信息,请参阅版本兼容性页面。

https://angular.io/guide/versions

Angular v16 需要配合 TypeScript 4.9 或更高版本使用

Angular v16 不再支持 4.9 之前的较早 TypeScript 版本。PR #49155

关于兼容性的完整说明信息,请参阅版本兼容性页面。

Angular 兼容性编译器(ngcc)已被移除

Angular 兼容性编译器(ngcc)是一种构建工具,用于促进 Angular 之前的编译器及渲染架构(View Engine)与其新架构(Ivy)之间的兼容性。

View Engine 已在 Angular v13 中被移除,v16 则最终移除了 ngcc。因此,现在已无法在 Angular v16+ 版本中使用由 View Engine 构建的 Angular 库。

Angular 包格式变更

Angular 包格式(APF)现已更新,具体包含以下变更:

  • Flattened ESM 2015 (FESM2015) 输出已被移除。

  • EcmaScript 2020 输出已更新至 EcmaScript 2022(包括扁平化输出)。

关于背景信息,请参阅 Angular 包格式页面。

https://angular.io/guide/angular-package-format

ReflectiveInjector 已被移除

ReflectiveInjector 及相关符号已被移除。请更新代码以避免引用 ReflectiveInjector 符号。作为替代方案,可以使用 Injector.create 创建注入器。

Router.createUrlTree 行为更新

由于 Router.createUrlTree 现可在更多场景中正确起效,因此需要对模拟 ActivatedRoute 实例的测试做相应调整。具体来讲,这意味着使用无效 / 不完整的 ActivatedRoute 模拟进行的测试可能引发与此前不同的行为。另外,测试现可导航至真实 URL,不同于之前只能导航至根目录的情况。请确保在测试中提供相应的预期路由。虽然几乎不会对生产造成影响,但我们发现此前如果使用未出现在当前路由程序状态中的 ActivatedRoute,相关导航可能会被忽略。在创建正确的 URL 之后,应用程序中的导航行为可能会有所不同。在大多数情况下,仅使用空命令数组更新查询参数的导航时会引发这个问题,例如 router.navigate([], {relativeTo: route, queryParams: newQueryParams})。要加以解决,应移除其中的 relativeTo 属性。

Angular v16 即将弃用的功能

以下 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资讯

谷歌、OpenAI 都白干,开源才是终极赢家!谷歌内部文件泄露:欲借开源打败 OpenAI

微信扫码关注该文公众号作者

戳这里提交新闻线索和高质量文章给我们。
相关阅读
Agustín Hernández:中美洲建筑背景下的未来主义巨构Vite 4.3 正式发布,前端构建工具“文心一言”正式发布,百度真的Ready了?重磅!GPT-4 正式发布,新版 ChatGPT 强到离谱,我们替你抢先体验了OCC 2023新闻中心丨 芯启航INSIGHTFUL-FFR国际多中心临床试验国内中心正式启动暨研究方案正式发布!绿研院日报 | 《TCL公益基金会年度报告》正式发布,传播善意,让爱发生Dining Cars: How an On-Board Snack Became a Guangdong Legend荣耀X50官宣7月5日正式发布,首发骁龙6Gen1lāo dao?láo dao!8大甲状腺功能化验指标,一次讲清!GPT-4 重磅发布!ChatGPT 炸裂大升级,直接能考上哈佛,抢先体验后我慌了Java 20 正式发布,超神了。。1399元起,荣耀X50正式发布,平板新品一同亮相东京日比谷公园的美食节 - 帝国酒店17楼的下午茶黑马天启CEO杨昕:天启科创大模型正式发布,未来可能会有几十万家企业受益于大模型那些隐秘的悲伤急急急!Apple Vision Pro「实验室」开门迎客,谁能抢先体验?全文下载 |《人工智能伦理治理标准化指南》正式发布!文心一言正式发布,百度股价蒸发300亿Blink 1.0正式发布, 最小的x86 Linux模拟器【VB100】2023年未来医疗100强榜单正式发布,聆听领袖企业的商业洞见全场景生态走向深入,openEuler 首批嵌入式商业版正式发布1975年宽松一点时,见到过瞎子艺人在茶馆讲半荤段子「360智脑大模型4.0」正式发布,支持文生视频,已接入360全家桶|最前线Slint 1.0 正式发布,基于 Rust 的 原生 GUI 工具包已成熟3999元起,联想moto razr 40 系列正式发布,打造小折叠终极形态2499 元起,荣耀90系列正式发布,2亿像素写真相机加持Vite 4.3正式发布,性能提升,为应对Rust写的Turbopack?2499元起,vivo S17系列正式发布,新机详细体验“智能”离不开“人工”:美国著作权局正式发布AI内容版权注册指南给自己创造上报纸的机会转摘:某大佬的“中美日后宫团”一周资讯 | 2024QS世界大学排名正式发布,加拿大移民局官宣六大政策,全球疯狂抢人美光在华销售产品未通过审查,微信刷掌支付正式发布,中国批准微软收购动视暴雪,JDG夺冠,这就是今天的其他大新闻!小米13 Ultra手机正式发布 售价5999元起
logo
联系我们隐私协议©2024 redian.news
Redian新闻
Redian.news刊载任何文章,不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。文章信息的合法性及真实性由其作者负责,与Redian.news及其运营公司无关。欢迎投稿,如发现稿件侵权,或作者不愿在本网发表文章,请版权拥有者通知本网处理。