Angular 13 的新功能：Angular 13 的主要新功能

言鼎科技 2023-06-29 472

介绍

考虑到过去发布的所有版本，Angular 13 是广泛采用的打字稿风格 Web 框架 Angular 最有组织的预先计划升级之一。到 2021 年 9 月 24 日，Angular 的创建者已经设计并发布了八个不同的 Angular 13 测试版。

关于 Angular 版本 13 的最新版本，我将确保包括所有值得注意的内容，就像我们在之前的Angular 12、Angular 11和Angular 10博文中所做的那样。如果您对 Angular 13 中的新功能的鸟瞰图感兴趣，那么可以快速浏览一下 Angular 13 发行说明、快速 Angular 核心更新和 Angular 13 的主要新功能。

Angular 13 的快速亮点

Angular 13 于 2021 年 11 月 3 日正式发布。

  • 100% Ivy = 改进的本地化 API 以动态创建组件

  • RxJS- 支持 JavaScript 编程库的 Reactive Extensions >=7.4

  • 不支持IE11

  • min、max 和 minLengt 等验证器可以动态启用或禁用

  • 构建缓存显着提高 70%

  • 更容易的指令禁用

  • 错误消息已得到改进

  • 移除 View Engine 支持

  • 改进的 APF – 更快的执行

  • Angular TestBed 改进

  • 打字稿 >=4.4.x


Angular 13 特性

这是在将应用程序升级到 Angular 13 之前应该了解的最新 Angular 13 新功能。

(1) 100% 常春藤

Angular 开发服务的创建者和提供者希望能够改进动态组件的质量。考虑到这一点，API 得到了简化。新的 API使用ViewContainerRef.createComponent删除了ComponentFactoryResolver，而不生成关联的工厂。

以下是使用以前版本的 Angular 创建组件的方式。


@Directive({ … }) 导出类 MyDirective {     构造函数（私有 viewContainerRef：ViewContainerRef，                 私有组件工厂解析器：                         组件工厂解析器）{}     创建我的组件（）{         const componentFactory = this.componentFactoryResolver。                              resolveComponentFactory（我的组件）；              this.viewContainerRef.createComponent(componentFactory);     } }  

以下是新的 API 代码如何变成的。


@Directive({ … }) 导出类 MyDirective {     构造函数（私有 viewContainerRef：ViewContainerRef）{}     创建我的组件（）{         this.viewContainerRef.createComponent(MyComponent);     } }

（2）RxJS 7.4

Angular v13 更新包括 RXJS 到版本 7 之前的所有版本。使用 CLI 创建的新应用程序将默认为 RxJS 7.4。如果您在现有应用程序中使用 RxJS 6，则必须手动运行命令 npm install rxjs@7.4以获取最新更新。

(3) 不再支持 Internet Explorer

Angular 13 不支持 Internet Explorer。如果您打算雇用 Angular 开发人员，那么您不应该期望从 IE11 中创建任何东西。

您是否正在寻找帮手来充实您的 Angular 项目但担心成本？
查看我们的详细指南，该指南涵盖了Angular 开发人员成本的各个方面，可帮助您聘请合适的人才而不用掏腰包。

(4) Angular 包格式 (APF) 的变化

Angular 包格式——APF 简化并现代化了旧的输出格式，包括 View Engine 元数据。APF 的更新版本不需要使用ngcc. 由于库中的这些变化，开发人员可以期待更快的执行速度和更精简的包输出。


(5) TestBed Teardown 现在默认

v12 中添加了 TestBed 配置，方便拆卸测试模块和环境。TestBed 拆解现在是默认功能，但您可以随意禁用和配置它。

(6) 文档改进

$localize 是一个稳定的 API。$localize 用于为内置国际化 (i18n) 和标记消息创建更有效的方法以在模板和代码中进行翻译！查看这些$localize 文档，了解如何在 Angular 中更轻松地学习和入门！

(7) 对 Adobe 字体的内联支持

就像 Google fonts- V11 一样，您也可以内联 Adobe 字体。为了您的参考，我附上了 Mark Thompson 的视频截图以加快字体内联的性能。


Mark 的字体内联视频教程的屏幕截图

(8) Angular Material 可访问性改进

基于 MDC 的 Angular Material 组件具有可访问性改进。Emma Twersky 在这篇博文中详细介绍了如何改进 Angular Component 的可访问性。


(9) 打字稿 4.4

TypeScript 4.4 得到全面支持，TS 4.4 的一些重要亮点包括：

  • 判别式和条件的控制流分析

  • 模板字符串模式索引签名

  • 默认捕获变量 (–useUnknownInCatchVariables)

  • 可选属性 (–exactOptionalPropertyTypes)

Angular v13 性能改进

最新版本的 Angular 13 带来了多项性能改进：

  • 现在默认启用选择加入功能

  • Angular CLI 的改进。新 v13 项目默认使用持久构建缓存的构建速度提高了 68%

  • 改进了构建性能以优化捆绑包和全局脚本。

  • 增量构建性能不包含任何 Angular 特征，如组件、指令、管道、可注入、NgModule 装饰器。

Angular v13 显着变化；

  • 所有 Angular 包都将 Node.js 16 添加到所有节点引擎中。

  • ViewContainerRef.createComponent 直接支持组件类型。接受 ComponentFactory 的现有签名现已弃用。

  • Ivy 不再需要来自@angular/platform-server 的 renderModuleFactory。相反，可以使用 renderModule。

  • Angular 语言支持模板中联合类型的自动完成。

您可能还想知道

Angular 14 有什么新功能？

包起来

Angular 团队确保每六个月对前一个版本进行一次新版本更新。Angular 12 于 5 月 12 日推出。现在 Angular v13 现已推出，具有各种功能和更新。使用 IVY 的强大功能试用 Angular 13。如果您使用的是旧版本，是时候从 Angular 12 更新到 Angular 13 以构建支持现代 Web 标准的出色应用程序。

您还可以利用我们的Angular 升级服务将您现有的项目更新到最新版本，同时最大限度地减少中断。

言鼎科技

The End

标签：