明科·格切夫
摄
我们带着全新的Angularv13版本回来与大家分享!这个最新版本带来了各种更新和功能,可帮助您的团队构建出色的应用程序。
现在通过ngupdate在您的项目中运行来获取Angularv13。我们还在update.angular.io上提供了更新指南,以帮助团队获得有关如何更新项目的说明。
对于每个新版本,我们的目标是找到使Angular变得更好的实质性方法。在此版本中,我们通过扩展基于Ivy的功能和优化、与我们优秀的Angular社区合作并继续为您的团队和项目提供流畅、稳定的更新过程来实现这一目标。
让我们先来看看我们是如何利用Ivy的力量推动Angular前进的。
将Angular渲染推向未来
在年5月的v12版本中,我们谈到了“IvyEverywhere”,并提到Angular会有一些重要的变化来支持这一举措。我们一直在努力追求这一点,我们非常高兴在v13中实现了一些有影响力的变化,因为Ivy继续为优化和改进敞开大门。
视图引擎的状态
从v13开始,Angular不再提供ViewEngine。这是个好消息,因为Angular可以继续创建基于Ivy的功能,从而通过该平台提高您的生产力。移除ViewEngine也意味着Angular未来可以减少对ngcc(Angular兼容性编译器)的依赖,团队可以期待更快的编译,因为元数据和摘要文件不再包含在内。
Angular包格式(APF)的更改
Angular包格式(APF)已经过精简和现代化,以更好地为开发人员服务。为了简化v13中的APF,我们删除了旧的输出格式,包括ViewEngine特定的元数据。
为了使其现代化,我们对更现代的JS格式进行了标准化,例如ES。使用最新版本的APF构建的库将不再需要使用.由于这些变化,库开发人员可以期待更精简的包输出和更快的执行。
我们还更新了APF以支持节点包导出。这将帮助开发人员避免在不经意间依赖可能发生变化的内部API。
组件API更新
Ivy还可以提高开发人员动态创建组件的方式的生活质量。API现在已经简化。在Angularv13发生变化之前,动态创建组件需要大量的样板代码。
新的API消除了ComponentFactoryResolver注入构造函数的需要。ViewContainerRef.createComponentIvy创造了在不创建关联工厂的情况下实例化组件的机会。
下面是使用以前版本的Angular创建组件的示例:
使用新的API,这段代码可以变成:
在Ivy将启用的工作中,我们还有更多类似的API改进。
结束IE11支持
我们听取了您的反馈,并努力为在Angularv13中删除IE11支持铺平道路。
删除IE11支持允许Angular通过原生WebAPI利用现代浏览器功能,例如CSS变量和Web动画。更重要的是,应用程序会更小,加载更快,因为我们可以删除IE特定的polyfills和代码路径。它还消除了对不同负载的需要。开发人员将受益于改进的API和构建基础设施,而应用程序用户将受益于更快的加载和改进的用户体验。
运行将自动删除这些特定于IE的polyfill,并在项目迁移期间减小包大小。
感谢所有参与征求意见(RFC)的人。对现有项目仍需要支持IE11用户的开发者可以继续使用Angularv12,它将支持到年11月。
AngularCLI的改进
关于Angular工具的更新。Angular现在默认支持对新的v13项目使用持久构建缓存。默认情况下,来自[RFC]Persistentbuildcache的宝贵反馈导致了此工具更新,该工具更新可将构建速度提高68%,并提供更多符合人体工程学的选项。为了使已升级到v13的现有项目启用此功能,开发人员可以将此配置添加到angular.json:
在文档中查找更多详细信息。
ESBuild在此版本中也看到了一些性能改进!我们介绍了esbuild,现在可terser用于优化全局脚本。此外,支持CSSsourcemaps并可以优化全局CSS,以及优化所有样式表。
框架更改和依赖项更新
Angularv13还具有一些有用的更新和重要更改。首先,RxJS7.4现在是使用ngnew.使用RxJSv6.x的现有应用程序必须使用该npminstallrxjs
7.4命令手动更新。要了解有关从版本6到版本7的更改的更多信息,请查看rxjs.dev上的此摘要。如果这还不够,现在还支持TypeScript4.4。更多信息可以通过查看TypeScript发布博客找到。
Angular测试的改进
我们已经对此进行了一些重要的改进TestBed,现在可以更好地在每次测试后拆除测试模块和环境。现在,每次测试后都会清理DOM,开发人员可以期待更快、更少内存密集、更少相互依赖和更优化的测试。
此功能自12.1.0起已启用,现在它将成为默认功能,同时仍可自定义。方法如下-可以通过以下TestBed.initTestEnvironment方法为整个测试套件配置:
或者可以通过更新TestBed.configureTestingModule方法为每个模块配置:
这提供了在对每个项目及其测试最有意义的地方应用这些更改的灵活性。查看LarsGyrupBrinkNielsen的博客以了解更多信息。
所有关于组件
可访问性(a11y)必须是我们在Angular社区内外构建的一切的基础。我们认真对待这一责任,我们所做的工作已经对AngularMaterial组件进行了有意义的改进和更改。
所有基于MDC的组件都经过评估,以满足对比度、触摸目标、ARIA等领域的更高a11y标准。
为了更好地了解这些更改如何影响组件,请查看我们对复选框和单选按钮等组件的触摸目标大小所做的调整。
触摸目标大小的比较。右边的尺寸是新尺寸。
多个组件的高对比度模式也有一些改进。
高对比度模式下的材料组件
在我们关于改进Angular组件可访问性的博文中了解更多关于这些变化的信息。我们希望这可以帮助每个人构建更具包容性的Angular应用程序。
其他值得注意的更新
随着年Angularv11的发布,我们引入了对内联Google字体的支持。现在,我们正在扩展对AdobeFonts的支持。请记住,内联字体可以通过加速FirstContentfulPaint(FCP)来提高您的应用程序性能。现在默认情况下为所有人启用此更改!你需要做的就是。我们有一个关于字体内联的视频,它可能会有所帮助,请在此处查看:
我们对angular.io上的文档进行了重要更改,以使开发人员对本地化API有更多的了解。本地化指南已更新为包含更小的部分,以使学习过程更加清晰。我们还为localize.
社区贡献
通过向框架添加功能,Angular社区永远不会停止以巨大的方式出现。Angular团队非常感谢这样一个充满活力的支持社区。让我们花点时间来强调一些在此版本中做出的贡献。
动态启用/禁用验证器
由NirmalBhagwani提交,此PR允许通过将值设置为来禁用内置验证器null。这在构建动态表单时变得越来越有用。
取消导航后恢复历史记录
AhmedAyed贡献了一个,允许canceledNavigationResolution路由器标志在设置为时恢复浏览器历史的计算值