Angular 正迅速走向更美好的未来

2021 年 11 月，Google 团队提出了 Angular 的另一个更新，即 v13。 Angular 13 为开发社区带来了一些令人兴奋的功能。

Google 的核心开发团队总是表示，他们每次发布新版本的目标都是找到切实可行的方法来改进 Angular。 他们在这个版本中通过扩展基于 Ivy 的功能和优化、与优秀的 Angular 社区合作以及继续为开发团队和项目提供流畅、稳定的更新过程来实现这一点。

如果您想知道 Angular 13 中的新功能，这里简要介绍了主要功能。

1. View Engine 不再服务

Angular 的最新版本 Angular 13 不再支持古老的 View Engine。使用 View Engine 会产生维护成本并增加 Angular 13 代码库的复杂性。 为了避免这种麻烦，Angular 现在只支持 Ivy 作为视图引擎。

由于此更改，一些现有库将自动迁移到部分编译模式，并且旧版 View Engine 以前需要的一些元数据将被删除。 此外，为确保顺利过渡，所有内部工具都提前转换为 Ivy。

Ivy 现在可以相互独立地编译各个组件，从而显着提高性能。 Angular 可以通过移除 View Engine 来减少对 ngcc 的依赖。

2. Angular 包格式 (APF) 的修改

Angular 包格式 (APF) 指定了 Angular 框架包的结构和格式以及视图引擎元数据。 这是在 Web 开发环境中打包每个第三方库的好方法。

新版本的 APF 包含一些重大更改。 在 Angular 13 中，不推荐使用旧的输出格式，包括一些特定于视图引擎的元数据。

在 APF 的更新版本中将不再需要使用 ngcc。 由于这些库更改，开发人员可以期待更快的执行。

3. IE 11 支持已被移除。

从版本 13 开始，Angular 将不再支持 Internet Explorer 11。删除 Internet Explorer 11 会导致更小的包大小和更快的应用程序加载。 此外，由于这些增强，Angular 现在可以通过原生 Web API 使用现代浏览器功能，例如 CSS 变量和 Web 动画。

由于改进的 API 和缺少特定于 IE 的 polyfill，应用程序将加载更快。 它还消除了对不同负载的需要。 开发人员将受益于改进的 API 和基础设施，而应用程序用户将受益于更快的加载和更好的用户体验。

在项目迁移期间运行 ng update 将自动删除这些特定于 IE 的 polyfill，从而减小包大小。

4. TypeScript 4.4 兼容性

TypeScript 4.4 支持已添加到 Angular 13 版本中。 因此，核心不再支持 4.4.2 之前的 TypeScript 版本。

以下是 TypeScript 4.4 的主要功能：

类型保护检测已得到改进

默认捕获变量

更快速的增量构建

可以检查条件的控制流

符号和模板字符串模式的索引签名

5、不再支持12.20之前的Node.js版本

Angular 13 不再支持 12.20.0 之前的 Node.js 版本。这是因为 Angular 包现在使用带有子路径模式的 Node.js 包导出功能。

6. RxJS 版本 7.4

RxJS 是 JavaScript 的响应式扩展，包含在 Angular 13 升级中，并且包括所有版本的 RxJS，包括版本 7。

RxJS 7.4 现在是使用 ng new 创建的应用程序的默认值。

必须使用 npm install rxjs@7.4 命令手动更新现有的 RxJS v6.x 应用程序。 你总是可以依赖 RxJS 7 来创建新项目。 现有项目应继续使用 RxJS 6。

7.路由器的变化

路由帮助我们从一个视图移动到另一个视图。 它通过将浏览器 URL 解释为更改视图的请求来促进导航。

当新导航取消当前导航时，路由器不再使用最新更新更改浏览器 URL。

与以前版本的 Angular 的兼容性存在几个问题，主要是查询参数。 例如，默认的 URL 序列化程序倾向于删除查询参数中问号后的所有内容。 相比之下，最近的更新改进了查询参数与问号的兼容性。

以前，routerLink 指令的 null 和 undefined 输入与空字符串相同，并且无法阻止链接被导航。 如果路由器链接指令值为 null 或未定义，导航现在将完全禁用。

8. Angular CLI 的增强

Angular CLI 是 Angular 难题中最重要的部分之一。 通过广泛降低复杂性，Angular CLI 有助于标准化处理现代 Web 开发生态系统错综复杂的过程。

随着 Angular 13 的发布，该框架现在具有持久的构建缓存功能，该功能将内置结果保存到磁盘作为默认功能。 因此，发展进程将加快。 此外，您可以完全控制在当前 Angular 项目中是否启用或禁用此功能。

9. 改进了Angular 测试

TestBed 已由 Angular 团队更新，现在可以在每次测试后正确删除测试环境和模块。

既然 DOM 在测试后被清除，开发人员可能期望更好的流线型、更少的相互依赖、内存密集型和更快的测试。

10. 创建动态组件

动态生成组件的更简化的技术是 Angular 13 中支持 Ivy 的 API 更新之一。要构造组件，ViewContainerRef.createComponent 不再需要实例化工厂（您不再需要使用 ComponentFactoryResolver）。

由于更新了 ViewContainerRef.createComponent API，它现在能够使用更少的样板代码生成动态组件。 下面是使用 Angular 的早期版本构建动态组件的示例。

@Directive({ … })
export class Test {
    constructor(private viewContainerRef: ViewContainerRef,
                private componentFactoryResolver: 
                        ComponentFactoryResolver) {}
    createMyComponent() {
        const componentFactory = this.componentFactoryResolver.
                             resolveComponentFactory(MyComponent);
    
        this.viewContainerRef.createComponent(componentFactory);
    }
}

使用 Angular 13 中的新 API，此代码将转换为以下内容：

@Directive({ … })
export class Test {
    constructor(private viewContainerRef: ViewContainerRef) {}
    createMyComponent() {
        this.viewContainerRef.createComponent(MyComponent);
    }
}

结论

您现在了解最新的 Angular 13 更改。 如果您仍在使用 Angular 12，那么是时候升级了，以便您可以在下一个项目中使用新功能。 如果您已经安装了新版本，请在下面的评论区分享您的想法。

这就是本文的内容。 我希望你今天学到了一些新东西。 想阅读更多这样的文章，请继续关注！

原文：https://javascript.plainenglish.io/10-features-of-angular-13-every-deve…

本文：https://jiagoushi.pro/node/1982