移除 View Engine 转用 Ivy，盘点Angular 12的重要更新

作者 | 核子可乐、晓旭

在经历了多个 beta 与候选版本之后，Angular 12 终于正式发布了。

Angular 12 版本的最大亮点就是淘汰掉了旧的 View Engine 编译与渲染管道，转而采用更为现代的 Ivy 技术。谷歌将 Ivy 描述为下一代编译与渲染管道，能够显著提升 AOT（ahead of time）编译速度。Angular 团队提到，View Engine 将在后续版本中被彻底移除。目前使用 View Engine 的库仍可与 Ivy 应用配合使用，但开发团队建议各位库作者提早向 Ivy 过渡。

移除 View Engine，转而使用 Ivy

从去年开始，Angular 就开始默认使用新的渲染和编译工作管线 Ivy。为了确保 Angular 能够提供良好的类型检查、快速侦测变更，Angular 官方团队一直在调整静态检查和动态构建的平台。

事实上，从 Angular 9 开始，新的 Angular 应用程序就默认启用 lvy。为了支持使用 View Engine 函数库的应用程序向后兼容，Angular 官方团队开发了 ngcc 相容编译器，ngcc 是编译 View Engine 函数库的方法，可以让 Ivy 应用程序方便地使用，ngcc 运作非常高性能，只会在必要的时候被调用。

由于 View Engine 函数库的存在，Angular 暂时还无法移除旧的实例化，这导致维护成本不断增加，Angular 整体发展速度也被拖慢。为了解决这个问题，Angular 官方团队发布了 lvy 函数库发布计划，新的应用程序开发可以直接使用 lvy。

据了解，目前绝大多数的应用程序都在使用 lvy。仍旧使用 View Engine 函数库的应用，也可以通过 ngcc 相容编译器转换为 lvy。基于此，Angular 12 启动了加速转移计划，官方移除 View Engine，并且禁止使用 View Engine 创建应用程序的功能，而且新函数库专案将默认使用 Ivy。

当然大家也不必担心，为了确保 Angular 框架和组件的函数库能够平滑过渡到 lvy，官网目前还会继续使用 View Engine，大约会在 Angular 13 彻底完成移除 View Engine。

其它更新亮点

除了移除 View Engine，Angular 12 发行版中还包括其他新功能与重要改进：

• 为了提高编译器 CLI 性能，若存在重新定向的源文件，新版本允许进行增量编译。
• 用于向 TyperScript 类中写入清晰代码的 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 属性补全功能。
• 对于 compiler-cli，新版本为请求提供 context 选项以保障属性数据的类型安全。这项功能可帮助用户针对各项请求在 HTTP 客户端中配置拦截器。
• 在动画方面，当用户删除 root 视图时，现在可以正确删除其中的 DOM 元素。这是一项重大变化。
• 为了提高性能，新版本删除了 DomAdapter 中的多种未使用方法。
• 新版本向 localize-extract 中添加一种新的格式，名为 legacy-migrate。此格式可用于生成 JSON 文件，进而将旧版消息 ID 映射为规范 ID。
• 严格 null 检查将报告各可能为 null 的片段。这同样是一项重大变化。
• APP-INITIALIZER 令牌的类型有所变更，旨在准确反映 Angular 处理的返回值类型。同样属于重大变化。
• 在新版本中，您可以通过 BrowserAnimationsModulewithConfig 禁用动画。
• 向 FormArray 与 FormGroup 中引入 emitevent 选项。也是一项重大变化。
• 向 routerLinkActiveOptions 中引入更多微调控件。
• 允许您自定义路由器出口实施方法。
• 新版本增加对 TypeScript 4.2 的支持，但对 TypeScript 4.0 与 4.1 的支持功能将被移除。
• 在 HttpParams 上实现了 appendAll()方法。
• 在表单中，引入最小与最大值验证器。
• 新版本可导出 HTTP 状态码列表。
• 向 Angular 语言服务添加一项功能，允许用户直接访问使用模板文件的组件的实际位置。
• 新增的诊断提示将建议您开启 strictTemplates，借此在语言服务中获得检索编译器选项诊断程序的方法。
• 新的补丁添加一项 API，用于在文件位置检索某一模板的模板类型检查块（如果有），并选定 TCB 中与发出 TCB 请求的模板节点相对应的 TS 节点。这项功能有助于提高调试效率。

新版本还对大量 bug 做出修复，进一步完善了编译器、compiler-cli、Bazel 构建工具、路由器以及 Angular 内其他组件的运行质量。

GitHub 链接：

https://github.com/angular/angular/blob/master/CHANGELOG.md

参考链接：

https://www.infoworld.com/article/3607428/angular-12-arrives-with-pile-of-improvements.html#jump