Angular 12的到来带来了大量的改进

147 阅读4分钟

谷歌基于TypeScript的网络框架的升级带来了性能、编译器、表单验证、语言服务等方面的增强。

Angular 12是谷歌流行的基于TypeScript的网络框架的最新升级版,现已作为生产版本发布。在其他改进中,这次升级废除了传统的View Engine编译和渲染管道,而采用了较新的Ivy技术。

5月12日发布的Angular 12可以在GitHub上使用,之前有许多测试版和候选版。Angular 12更接近于框架的 "Ivy everywhere "愿景。Ivy被描述为新一代的编译和渲染管道,提供更快的AOT(提前)编译。

Angular团队指出,View Engine将在未来的版本中被移除。目前使用View Engine的库仍然可以在Ivy应用中工作,但建议库的作者开始过渡到Ivy。

同样在Angular 12中,基于Ivy的语言服务,提供了诸如代码补全和模板内的提示等功能,从选择进入变为默认开启。第12版中的其他新功能和改进:

  • 为了提高编译器CLI的性能,在有重定向源文件的情况下,允许增量编译。
  • 为了在TypeScript类中编写更清晰的代码,Nullish凝聚现在可以与Angular模板一起工作。
  • Angular CDK和Angular Material都暴露了一个新的Sass API表面,旨在与新的@use 语法一起消费。当更新到Angular 12时,应用程序将通过ng update ,自动切换到新的API。
  • 有工具可用于将传统的本地化ID迁移到使用最新算法的ID。
  • 组件现在支持在@component 装饰器的styles 字段中的内联Sass。
  • 运行ng build ,现在默认为生产模式,节省了步骤,有助于防止开发构建的意外部署。
  • 在CLI中默认启用了严格模式,以便在开发周期的早期捕获错误。
  • Webpack 5模块捆绑器已经可以投入生产了。
  • 对IE11浏览器的支持已被取消。
  • 对于编译器,提供了对组件样式资源转换的支持。
  • 对于语言服务,只在模板中提供Angular属性补全
  • 对于编译器-li,为任何允许以类型安全的方式提供任意数据的请求引入了一个context 选项。这个功能解决了在HTTP客户端中按请求配置拦截器的需要。
  • 对于动画,当根视图被移除时,DOM元素现在被正确地移除。这是一个突破性的变化。
  • 为了提高性能,未使用的方法已经从DomAdapter
  • localize-extract ,增加了一种新的格式,叫做 [legacy-migrate](https://github.com/angular/angular/pull/41026)来生成一个JSON文件,可以用来将传统的消息ID映射为规范的ID。
  • 严格的空值检查将报告一个可能为空的片段。这是一个突破性的变化。
  • APP-INITIALIZER标记的类型已经改变,以更准确地反映Angular处理的返回值的类型。这是一个突破性的变化。
  • 增加了对通过BrowserAnimationsModulewithConfig 禁用动画的支持。
  • emitevent 选项被添加到FormArrayFormGroup 。这是一个突破性的变化。
  • 更多的微调控制被添加到了 [routerLinkActiveOptions](https://github.com/angular/angular/pull/40303).
  • 允许自定义路由器出口实现。
  • 增加了对TypeScript 4.2的支持,并放弃了对TypeScript 4.0和TypeScript 4.1的支持。
  • HttpParams实现了appendAll() 方法
  • 对于表单,正在引入最小和最大验证器
  • 导出HTTP状态代码的列表。
  • Angular语言服务中增加了一个功能,能够访问使用模板文件的组件的位置
  • 增加了建议打开strictTemplates的诊断,为语言服务器提供了一种检索编译器选项诊断的方法。
  • 增加了一个API,用于检索文件位置的模板类型检查块(如果有的话),以及选择TCB中对应于请求TCB的模板节点的TS节点。这将有助于调试。

此外,还有各种错误修复,影响到编译器、编译器-li、Bazel构建工具、路由器和Angular的其他部分。完整的变化列表可以在GitHub上找到。之前的Angular 11线在11月作为生产版本首次亮相。