【翻译】现在可以使用 Angular12 了

原文：Angular v12 is now available

image

又到这个时候了，朋友们，我们又发布了一个新版本，我们迫不及待地想同你分享 Angular v12 中所有重要的更新和特性。

在我们深入了解这些更新之前，让我们确定一下 Angular 的发展之旅，我们认为 Angular 未来的关键是 Ivy 和它带来的东西。我们最近几个版本的主要工作是将 Angular 生态系统融合到 Ivy 上，我们喜欢称这种方法为“Ivy Everywhere”，以下是我们为实现这种转变所做的改变。

离 Ivy 越来越近了

Angular 下一步发展的关键时刻终于到来 - 我们终于弃用 View Engine，这意味着：

  • 目前 View Engine 已被弃用，并将在未来一个主要版本被移除.
  • 目前使用 View Engine 的库仍然可以在 Ivy 下工作（开发人员不需要任何工作），但是库作者应该开始着手计划过渡到 Ivy。

我们写了一个博客文章提供有关此更改的详细信息以及它对库作者和其他人的意义。

迁移旧的 i18n ID

当前，我们的 i18n 系统中使用了多种旧的 ID 格式，这些旧的 ID 是不稳定的，因为基于空白字符、格式化模板和 ICU 表达式可能会出现问题。为了解决这个问题，我们正在逐步去除它们，新的 ID 格式更加灵活和直观。这种格式将减少不必要的翻译无效化和相关的重新翻译成本，例如，由于空白更改而导致翻译不匹配。

从 v11 开始，新的项目就被自动配置为使用新的 ID，并且我们现在拥有翻译迁移工具，在这里了解更多 。

Protractor 的未来

Angular 团队一直在与社区合作，以确定 Protractor 的未来。我们目前正在审查 RFC 中的反馈，我们仍然还在考虑 Protractor 的最佳未来。我们选择不在新项目中包含它，而是在 Angular CLI 中提供流行的第三方解决方案。我们目前正在与 Cypress、Webdririo 和 TestCafe 合作，帮助用户采用其它解决方案。更多信息将随着这一发展而来。

空值合并

空值合并（??）在 TypeScript 中发布已经有一段时间了，现在我们很高兴地宣布你可以在 Angular 的模版中使用了～

现在，在模板中，开发人员可以使用新语法来简化复杂的条件句。例如：

{{age !== null && age !== undefined ? age : calculateAge() }}

变成：

{{ age ?? calculateAge() }}

快去试一试，让我们知道你的想法！

学习 Angular

我们一直致力于改善开发者的学习体验。作为这项工作的一部分，我们对文档进行了一些有意义的更改，我们写了一个内容投影指南，而且还有更多的内容在制作中。另外我们收到了很多反馈和疑问，询问如何帮助我们改进文档。好消息是我们更新了angular.io 的投稿指南，这将有助于社区来改善文档。看看吧，来帮助我们把文档做得更好。还有就是我们在上一个主要版本提供了错误排查的指南和视频，社区发现这非常有用，因此如果你还有查看过他们，请务必查看它们 !

样式的改进

从 v12 开始，Angular 支持在 @Component 装饰器的 styles 字段中支持内联 Sass。以前，由于 Angular 编译器，Sass 只能在外部资源中使用。要在现有项目中启用此功能，请在 angular.json 中添加 "inlineStyleLanguage": "scss”到。否则它仅可用于使用SCSS 的新项目。

在 v11.2 版本中，我们增加了对 Tailwind CSS 的支持。要在项目中开始使用它：从 npm 安装 tailwindcss 包，然后在项目中创建 tailwind.config.js，然后你的团队就可以使用啦。

Angular CDK 和 Angular Material 内部采用了 Sass 的新模块系统. 如果您使用了它们，则需要确保已从 node-sass 切换到 sass，node-sass包已经不维护了，它不会再跟进 Sass 语言的新特性。此外，CDK 和 Material 都暴露了新的 Sass API，旨在供新的 @use 语法使用。新的 API 提供了相同的功能，但具有更有语义的名称和更少的上手成本。另外所有 material.angular.io 上的指南都已经被完全重写，以展示新 API 并提供有关概念和更详细的说明。

当更新到 v12 时，您的应用程序将自动切换到新的 Sass API，方法是使用 ng update。此命令会将 CDK 和 Material 代码的所有 Sass @import 语句重构为新的 @use API，下面是重构前后对比的示例 。

更多精彩功能

让我们看一下此发行版中进行的其它一些重大更新：

  • 现在，运行 ng build 会默认为 production。这可以节省团队一些额外的步骤，并有助于防止生产中意外混入了开发代码。

  • 默认情况下，严格模式在 CLI 中处于启用状态。严格模式有助于在开发周期的早期发现错误。在文档和博客中了解有关严格模式的更多信息。

  • 默认情况下，基于 Ivy 的语言服务默认启用。语言服务可以在 Angular 模板中提供代码补全，错误，提示和导航等强大功能，有助于在构建应用程序时提高工作效率。可以从这个视频中了解更多。

  • 在 v11 更新中，我们添加了对 Webpack 5 的实验性支持。今天我们很高兴地宣布，我们将在 Angular 中发布可用于生产环境的Webpack 5 支持版本。

  • 我们还将 TypeScript 版本更新为 4.2，请查看此帖子以获取有关内容以及详细信息。

不再支持 IE11

Angular 是一个保持更新的框架，这意味着它可以与不断发展的 Web 生态系统保持同步。取消对旧版浏览器的支持可以让我们集中精力提供现代解决方案，并为开发人员和用户提供更好的支持。我们将开始在 Angular v12 中发出弃用警告消息，并在 Angular v13 中删除对 IE11 的支持。您可以通过该 RFC 来查看我们的决策依据。

社区的支持

Angular 社区一直在努力通过为框架做出贡献来改善每个人的 Angular 开发体验，感谢您的出色工作，以下是一些PR：

  • 避免 ngZone 不必要地发出与导航相关的警告 (#25839)

  • HttpClient 支持指定请求元数据( #25751 )

  • 表单验证器增加 max 和 min( #39063 )

  • APP_INITIALIZER 支持 Observable( #33222 )

总结

Angular团队一直在努力为社区提供服务。请确保在 Twitter上关注我们以获取更新，并在经过改版的 YouTube 频道中关注我们以获取新内容。

您最喜欢 v12 的哪个功能？评论这个帖子，让我们知道。非常感谢您成为不可思议的 Angular 社区的一员，请继续使用 Angular 构建出色的应用程序！