Angular v14 现已推出

Posted 2023-04-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular v14 现已推出相关的知识，希望对你有一定的参考价值。

参考技术A 艾玛·特沃斯基摄

我们很高兴地宣布 Angular v14 的发布！从类型化表单和独立组件到 Angular CDK（组件开发工具包）中的新原语，我们很高兴分享每个功能如何让 Angular 变得更强大。

自上次发布以来，我们完成了两个主要的评论请求 (RFC)，这为整个 Angular 社区提供了一个机会，可以就提议的更改提供设计反馈。因此，我们的Strictly Typed Reactive Forms RFC关闭了我们的#1 GitHub issue，我们的独立 APIs RFC引入了一种更简单的方式来编写 Angular 应用程序。

我们还将 Angular 组织中存储库中的默认分支重命名为main，继续我们对包容性社区的承诺。

此外，此版本包括许多由社区成员直接贡献的功能和错误修复，从添加路由器强类型到更多可摇树的错误消息。我们很高兴地强调 RFC 和社区如何继续使 Angular 成为更好的默认开发人员体验！

Angular 独立组件旨在通过减少对 NgModules 的需求来简化 Angular 应用程序的创作。在 v14 中，独立组件处于开发者预览版中。它们已准备好在您的应用程序中用于探索和开发，但不是稳定的 API，并且可能会在我们典型的向后兼容性模型之外发生变化。

使用独立的组件、指令和管道，该standalone: true标志允许您imports直接添加到您的@Component()不带@NgModule().

探索一个新的 Stackblitz 演示应用程序，以了解有关如何使用独立组件构建 Angular 应用程序的更多信息。

在开发者预览版中，我们希望利用开源来确保独立版已做好充分准备，可以作为稳定的 API 发布。添加您的第一个独立组件ng generate component --standalone，然后前往我们的 GitHub 存储库，在您开始探索时提供反馈。

在接下来的几个月中，我们将继续构建示意图（例如ng new --standalone），并记录这种新的、简化的心智模型的用例和学习过程。请记住，在开发者预览版中，随着我们继续实施我们的设计，可能会发生变化。

Angular v14 关闭了 Angular 的首要 GitHub 问题：为 Angular Reactive Forms 包实现严格类型。

类型化表单支持代码编辑器自动完成控件和值

类型化的表单确保表单控件、组和数组中的值在整个 API 表面上都是类型安全的。这可以实现更安全的表单，尤其是对于深度嵌套的复杂案例。

此功能是公众征求意见和设计审查的结果，它建立在 Angular 社区贡献者（包括Sonu Kapoor、Netanel Basel和Cédric Exbrayat）之前的原型设计、工作和测试之上。

更新原理图允许增量迁移到键入的表单，因此您可以逐步将键入添加到现有表单中，并具有完全的向后兼容性。ng update将用无类型版本替换所有表单类（例如FormGroup-> UntypedFormGroup）。然后，您可以按照自己的节奏启用类型（例如UntypedFormGroup-> FormGroup）。

为了利用新的类型支持，我们建议搜索Untyped表单控件的实例并尽可能迁移到新的类型化表单 API 界面。

Angular v14 带来了内置功能，使开发人员能够构建高质量的应用程序，从路由到您的代码编辑器，从angular.io 上的新更改检测指南开始。

另一个最佳实践是确保您的应用程序的页面标题唯一地传达页面的内容。v13.2 使用Angular 路由器中的新Route.title属性简化了这一点。由于Marko Stanimirović的惊人社区贡献，添加titlenow 不需要额外的导入并且是强类型的。

您可以通过提供自定义TitleStrategy.

在这些示例中，导航到“/about”会将文档标题设置为“我的应用程序-关于我”，而导航到“/home”会将文档标题设置为“我的应用程序-首页”。

您可以在 Google I/O 2022 研讨会上了解有关此功能的更多信息，了解如何使用 Angular 进行无障碍构建。

从 Google I/O 2022 学习使用 Angular 进行无障碍构建

新的扩展诊断提供了一个可扩展的框架，让您可以更深入地了解您的模板以及如何改进它们。诊断为您的模板提供编译时警告，并提供精确、可操作的建议，在运行时发现错误。

我们对它为开发人员在未来添加诊断功能引入的灵活框架感到兴奋。

扩展诊断有助于在运行时之前捕获 Angular 常见错误

在 v13.2 中，我们包含了内置的扩展诊断，以帮助开发人员捕获两个最常见的模板错误。

一个常见的开发人员语法错误是在双向绑定中翻转括号和括号，写作([])而不是[()]. 由于()sorta 看起来像香蕉，而[]sorta 看起来像一个盒子，我们将其称为“盒子里的香蕉”错误，因为香蕉应该放在盒子里。

虽然这个错误在技术上是有效的语法，但我们的 CLI 可以认识到这很少是开发人员想要的。在 v13.2 版本中，我们在 CLI 和您的代码编辑器中引入了有关此错误的详细消息以及有关如何解决此问题的指导。

扩展诊断也会引发 Angular 模板中无用的无效合并运算符(??) 的错误。具体来说，当输入不是“可空的”时会引发此错误，这意味着它的类型不包括nullor undefined。

ng build扩展诊断在、ng serve和 Angular 语言服务中实时显示为警告。诊断可在中配置tsconfig.json，您可以在其中指定诊断应为warning、error还是suppress。

在我们的文档和扩展诊断博客文章中了解有关扩展诊断的更多信息。

随着我们继续我们的Angular 调试指南，Ramesh Thiruchelvam的社区贡献添加了新的运行时错误代码。强大的错误代码使参考和查找有关如何调试错误的信息变得更加容易。

这允许构建优化器从生产包中摇树摇晃错误消息（长字符串），同时保留错误代码。

要调试生产错误，我们建议前往我们的参考指南并在开发环境中重现错误，以便查看完整的字符串。我们将继续增量重构现有错误，以在未来版本中利用这种新格式。

v14 包括对最新 TypeScript 4.7 版本的支持，现在默认以 ES2020 为目标，这允许 CLI 交付更小的代码而无需降级。

此外，我们还想强调三个特色：

在 v14 中，您现在可以直接从模板绑定到受保护的组件成员，这要归功于Zack Elliott的贡献！

这使您可以更好地控制可重用组件的公共 API 表面。

ViewContainerRef.createEmbeddedViewv14 添加了对通过和创建嵌入式视图时传入可选注入器的支持TemplateRef.createEmbeddedView。注入器允许在特定模板中自定义依赖注入行为。

这为编写可重用组件和 Angular CDK 中的组件原语提供了更简洁的 API。

最后，Artur Androsovych 的社区贡献关闭了一个热门问题，并确保 NgModel 更改反映在 OnPush 组件的 UI 中。

CDK 和工具改进为更强大的开发环境提供了构建块，从 CDK 菜单原语到 CLI 自动完成。

Angular 的组件开发工具包提供了一整套用于构建 Angular 组件的工具。在 v14 中，我们将 CDK菜单和对话框升级为稳定版！

材质对话框现在使用 CDK 对话框构建

此版本包括新的 CDK 原语，可用于基于WAI-ARIA 菜单和菜单栏设计模式创建更易于访问的自定义组件。

v14 包括用于HarnessLoader检查线束是否存在以及返回线束实例（如果存在）的新方法。组件测试工具继续提供一种灵活的方式来为您的组件编写更好的测试。

标准化的 CLI 参数解析意味着整个 Angular CLI 的一致性更高，现在每个标志都使用--lower-skewer-case格式。我们删除了已弃用的驼峰式大小写参数支持，并添加了对组合别名使用的支持。

好奇这是什么意思？运行ng --help更清晰的输出来解释您的选项。

不小心打字ng sevre而不是ng serve一直发生。拼写错误是命令行提示符引发错误的最常见原因之一。为了解决这个问题，v14 的新ng completion功能引入了实时预输入自动完成功能！

为确保所有 Angular 开发人员都知道这一点，CLI 将提示您在 v14 中的第一个命令执行期间选择加入自动完成功能。您也可以手动运行ng completion，CLI 会自动为您设置。

ng 完成在 Angular CLI 中添加自动完成功能

CLI 的分析命令允许您控制分析设置和打印分析信息。更详细的输出清楚地传达您的分析配置，并为我们的团队提供遥测数据，以告知我们的项目优先级。当你打开它时，它真的有很大帮助！

Angular CLI 中的 ng 分析

ng cache提供了一种从命令行控制和打印缓存信息的方法。您可以启用、禁用或从磁盘中删除，并打印统计信息和信息。

ng cache在 Angular CLI 中

得益于Keith Li的社区贡献，Angular DevTools 调试扩展现在支持离线使用。对于 Firefox 用户，请在Mozilla 附加组件中找到该扩展。

用于 Firefox 的 Angular 开发工具

最后，v14 引入了一个实验性的基于 esbuild 的构建系统ng build，用于编译纯 ESM 输出。

要在您的应用程序中尝试此操作，请更新您的浏览器构建器angular.json：

随着我们继续增加对 Sass 等样式表预处理器的支持，我们的团队很高兴能够收集有关您应用程序性能的反馈。