[译2021]Angular v12 现已推出
朋友们,又到了这个时候了——我们带着新版本回来了,我们迫不及待地想分享 Angular v12 中等待着您的所有精彩更新和功能。
在深入了解这些更新之前,让我们先回顾一下 Angular 之旅。 Angular 未来的关键是 Ivy 以及它为该平台带来的功能。我们一直致力于在最近的版本中实现将 Angular 生态系统融合到 Ivy 上的目标。我们喜欢将这种方法称为“无处不在的Ivy”。
以下是我们为实现这一转变而做出的改变。
向各地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、WebdriverIO 和 TestCafe 合作,帮助用户采用替代解决方案。随着事态的发展,我们将提供更多信息。
空值合并(Nullish Coalescing)
一段时间以来,空值合并运算符 ( ?? ) 一直在帮助开发人员在 TypeScript 类中编写更清晰的代码。我们很高兴地宣布,您可以在 v12 中为 Angular 模板带来 nullish 合并的强大功能!
现在,在模板中,开发人员可以使用新语法来简化复杂的条件。例如:
{{age !== null && age !== undefined ? age : calculateAge() }}
变成:
{{ age ?? calculateAge() }}
今天就尝试一下,让我们知道您的想法!
学习在线课程,掌握职场技能
我们始终致力于改善开发人员的 Angular 学习体验。作为这项工作的一部分,我们对文档进行了一些有意义的更改。我们编写了内容投影指南,正在编写更多新内容。
但这个故事还有更多内容。我们收到了大量反馈和问题,询问您如何帮助我们改进文档。好消息,我们更新了 angular.io,添加了贡献者指南,这将帮助人们改进文档。检查一下并帮助我们改进文档。
这里还有一件事 – 自我们上一个主要版本以来,我们已经包含了错误消息的指南和视频。社区发现这非常有帮助,所以如果您还没有看到它们,一定要检查一下!
时尚的改进
从 v12 开始,Angular 组件现在将在@Component装饰器的styles字段中支持内联 Sass。此前,由于 Angular 编译器的原因,Sass 只能在外部资源中使用。要在现有应用程序中启用此功能,请将"inlineStyleLanguage": "scss”添加到angular.json 。否则,它将可用于使用 SCSS 的新项目。
在 v11.2 版本中,我们添加了对 Tailwind CSS 的支持。要开始在项目中使用它:从npm安装tailwindcss包,然后初始化 Tailwind 以在项目中创建tailwind.config.js 。现在,团队已准备好开始在 Angular 中使用 Tailwind。
Angular CDK和Angular Material内部采用了Sass的新模块系统。如果您的应用程序使用 Angular CDK 或 Angular Material,您需要确保已从node-sass切换到sass npm 包。 node-sass包不再维护,并且不再跟上 Sass 语言的新功能添加。
此外,Angular CDK 和 Angular Material 都公开了一个新的 Sass API 表面,专为使用新的@use语法而设计。这个新的 API 界面提供了相同的功能,但具有更有意义的名称和更符合人体工程学的入口点。 Material.Angular.io 上的所有指南都已完全重写,以展示这个新的 API 界面,并提供主题概念和 API 的更详细解释。
更新到 v12 时,您的应用程序将通过使用ng update更新您的应用程序自动切换到新的 Sass API。此命令会将 Angular CDK 和 Angular Material 代码的任何 Sass @import语句重构为新的@use API。这是之前和之后的示例。
更多精彩功能
让我们看一下此版本中的其他一些重要更新:
- 现在运行
ng build默认为新的 v12 项目进行生产,这可以为团队节省一些额外的步骤,并有助于防止生产中意外的开发构建!值得注意的是,这仅适用于新项目。 Angular 工具不执行任何自动迁移。如果您想尝试使用可选的迁移工具,您可以通过:
ng update @angular/cli — migrate-only production-by-default
- CLI 中默认启用严格模式。严格模式有助于在开发周期的早期发现错误。在文档中了解有关严格模式的更多信息,并在我们的博客上查找原始公告。
- 基于 Ivy 的语言服务正在从选择加入转变为默认开启。语言服务通过提供代码补全、错误、提示和 Angular 模板内导航等出色功能,帮助您提高构建应用程序时的工作效率。查看
out this video tour to learn more.
观看此视频导览以了解更多信息。 - 在 v11 更新中,我们添加了对 Webpack 5 的实验性支持。今天,我们很高兴地宣布,我们将在 Angular 中发布 Webpack 5 支持的生产就绪版本。
- 我们还将支持的 TypeScript 版本更新至 4.2 — 请查看这篇文章,了解有关所包含内容的更多详细信息。
弃用对 IE11 的支持(后面就直接放飞自我了,直接不支持IE)
Angular 是一个常青平台,这意味着它与不断发展的网络生态系统保持同步。取消对旧版浏览器的支持使我们能够集中精力为开发人员和用户提供现代解决方案和更好的支持。
我们将开始在 Angular v12 中添加新的弃用警告消息,并在 Angular v13 中删除对 IE11 的支持。
您可以通过访问此RFC查看我们的决定理由。
社区的支持
Angular 社区一直在努力通过为框架做出贡献来改善每个人的 Angular 体验 – 谢谢!以下是由于您出色的工作而获得的一些 PR:
- 避免
ngZone抛出不必要的导航相关警告(#25839) HttpClient支持指定请求元数据 ( #25751 )- 添加了
min和max表单验证器( #39063 ) - 支持
APP_INITIALIZER与 observables 一起使用 ( #33222 )
结论
Angular 团队一直在许多领域努力为社区服务。请务必在 Twitter 上关注我们以获取最新动态,并在我们改版后的 YouTube 频道上关注我们以获取最新内容。
您对 v12 的哪项功能最感兴趣?评论这篇文章并让我们知道。
非常感谢您成为令人难以置信的 Angular 社区的一员。直到下一次,继续构建出色的应用程序!
原文链接:https://blog.angular.dev/angular-v12-is-now-available-32ed51fbfd49