写点什么

Angular 16 正式发布,抢先体验指南

  • 2023-05-08
    北京
  • 本文字数:2549 字

    阅读完需:约 8 分钟

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 好用吗?

2023 重学 Angular

前端架构三大巨头之一 Angular|深度讲解

AngularJS 进阶 (二十五)requirejs + angular + angular-route 浅谈 HTML5 单页面架构

2023-05-08 14:525328

评论

发布
暂无评论
发现更多内容

一致性哈希算法

java易二三

程序员 算法 计算机 科技

基于YonGPT 的智能生单,让业绩达成更轻松!

用友BIP

企业服务大模型 YonGPT

Sprint Boot学习路线3

小万哥

Java spring 后端 springboot SpringCloud

文心一言 VS 讯飞星火 VS chatgpt (69)-- 算法导论6.5 8题

福大大架构师每日一题

福大大架构师每日一题

javascript函数基础

timerring

JavaScript

2023年度姑苏创新创业领军人才计划项目指南来了!

科兴未来News

MTS性能监控你知道多少

GreatSQL

greatsql mts

Redis击穿、穿透、雪崩产生原因以及解决思路

java易二三

redis 程序员 计算机

PoseiSwap:首个基于模块化设施构建的订单簿 DEX

BlockChain先知

Python超实用!批量重命名文件/文件夹,只需1行代码

程序员晚枫

Python 文件管理 自动化办公

深入浅出DAX:数据分析

TiAmo

数据分析 数据处理 DAX

活动回顾|OpenTiny:跨框架前端组件库的技术实现和实践(内含ppt课件)

OpenTiny社区

开源 前端 UI组件库

8.15币安将上线CYBER

币离海

2023年7月文章一览

codists

编程人生

千云探探监测到7月25日法国巴黎Facebook网络恢复正常

郑州埃文科技

网络性能

医疗知识图谱问答 —— 数据同步

北桥苏

Python neo4j 知识图谱

为什么Java程序会执行一段时间后跑的更快?

java易二三

Java 编程 程序员 计算机

分布式图计算如何实现?带你一窥图计算执行计划

TuGraphAnalytics

sql 分布式 执行计划 图计算 查询语言

火山引擎ByteHouse:云原生数据库如何提升MySQL兼容性?

字节跳动数据平台

数据库 大数据 云原生 数仓 企业号 8 月 PK 榜

PoseiSwap:首个基于模块化设施构建的订单簿 DEX

西柚子

微信朋友圈的高性能复杂度架构

艾瑾行

#架构训练营

Gartner发布《2023年中国ICT技术成熟度曲线》,明道云连续两年入选样本厂商

明道云

Angular 16 正式发布,抢先体验指南_大前端_丁晓昀_InfoQ精选文章