全栈算力,加速行业AI落地 了解详情
写点什么

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:524799

评论

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

QCon大会实录:PB级数据秒级分析-腾讯云原生湖仓DLC架构揭秘

腾讯云大数据

数据仓库 数据湖

百度网盘“第二大脑”产品探析,AI技术让记忆更轻松

科技热闻

永续合约交易所软件开发的探讨

西安链酷科技

dapp开发 链游开发

交割合约交易所开发APP

西安链酷科技

合约量化 合约交易所开发 量化合约

如何使用聊天GPT自定义说明

3D建模设计

ChatGPT

4 个你可能不知道的 Python 迭代工具过滤器函数

3D建模设计

Python

和鲸科技入选创业邦“2023值得关注的125家AIGC企业”榜单,创新实力再获认可

ModelWhale

数据科学 大模型 AIGC

软件测试|比Selenium更加强大的Playwright

霍格沃兹测试开发学社

【压力测试指南】没有任何文档,小白也可以做的压力测试

优测云服务平台

性能测试 接口测试 压力测试 测试技术干货

性能最佳实践

FunTester

2023年19款最佳3D打印软件

3D建模设计

3D打印

使用Blender 在影片剪辑上创建粘滞标签

3D建模设计

blender

OmniPlan Pro 4 for Mac(项目流程管理工具) 4.5.5激活版

mac

项目管理软件 苹果mac Windows软件 OmniPlan Pro

软件测试|Flask框架-接口使用

霍格沃兹测试开发学社

C++提高篇:深入理解纯虚函数和抽象类

树上有只程序猿

纯虚函数 C++

新华社《中国扫描十年发展图鉴》:扫描全能王为3亿用户带去“掌心里的便利”

合合技术团队

人工智能 合合信息 扫描全能王 新华社

火热的低代码,是时候系统的来学一学了!

互联网工科生

低代码 应用开发 数字化工具

Boot Camp分区备份还原 Winclone pro 10激活安装包

mac大玩家j

Mac软件 迁移助手

AI 时代的向量数据库、关系型数据库与 Serverless 技术丨TiDB Hackathon 2023 随想

PingCAP

数据库 Serverless TiDB

和鲸支持!2023 中国高校计算机大赛大数据挑战赛圆满收官

ModelWhale

大数据 清华大学 高等教育 数据科学竞赛 计算机大赛

利用观测云实现业务数据驱动的弹性扩缩容

观测云

微服务 监控告警 自定义编程

爬虫系统的核心:如何创建高质量的HTML文件?

SoFlu软件机器人

教师节丨校企合作重磅福利,数据科学校内赛与数据科学数据科学教学实训工作坊免费申办

ModelWhale

数据科学 教学 教师节 高等教育 数据科学竞赛

Claris FileMaker Pro for mac(数据库软件) 20.1.2.204 中文激活版

mac

数据库软件 苹果mac Windows软件 Claris FileMaker Pro

软件测试|Pycharm常用插件介绍

霍格沃兹测试开发学社

2023年13个面向初学者最佳免费3D建模软件

3D建模设计

3D 建模

关于假冒我司关联公司进行欺诈活动的严正声明!

力软低代码开发平台

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