Angular 重大版本升级： 8.0 正式发布! 支持更多 Web 标准

最新推荐文章于 2024-07-25 09:23:08 发布

置顶一个处女座的程序媛

最新推荐文章于 2024-07-25 09:23:08 发布

阅读量7.1k

点赞数 1

分类专栏： Web前端与移动开发文章标签： Angular Angular 8.0 前端版本升级

Web前端与移动开发专栏收录该内容

25 篇文章 1 订阅

订阅专栏

Angular 8.0.0 版本正式发布了！8.0 是重大版本升级，整个平台，包括框架、Angular Material 和 CLI 都同步升级到了新版。Angular 8.0 版缩短了应用在现代浏览器上的启动时间，提供了用于访问 CLI 的新 API，并使 Angular 支持更多 Web 标准，追上了 Web 生态的前沿发展趋势。

如何更新到 Angular 8.0.0 版本
用户可以访问update.angular.io以获取新版详细信息和升级指导，大多数开发者可以使用以下命令开始更新：

ng update @angular/cli @angular/core

默认进行差异加载
差异加载是浏览器根据自己的能力来选择加载新式或旧式 JavaScript 的过程。现在我们默认开启此功能，为应用提供新版构建（es2015）和老式构建（es5）。这样当用户加载应用时将自动获得所需的包。

如果你使用的是 ng update，Angular 会更新你的 tsconfig.json 以加入此功能。Angular 的 CLI 会查看 tsconfig.json 中的 target JS 级别，以判断是否启用差异加载功能。

{
  "compilerOptions": {
  …
  "module": "esnext",
  "moduleResolution": "node",
  …
  "target": "es2015",
  …
},

当 target 设置为 es2015 时，Angular 会生成并标记两个包。

运行时，浏览器使用脚本标记上的属性来加载正确的包。

<script type =“module”src =“...”> // 新版 JS
<script nomodule src =“...”> // 老式 JS

在 angular.io 上，为现代浏览器节省了超过 40kB 的初始包大小。根据社区反馈，应用程序通常可以节省 7-20％的捆绑包大小，具体取决于用户使用了多少新版 JavaScript 功能。
在这里插入图片描述

angular.io 上的包大小缩小了大约 41KB

在此处查阅有关差异加载的详细信息。

路径配置使用动态导入
我们强烈建议用户使用路由懒加载应用的一些部分。可以在路由配置中使用 loadChildren 键启用此功能。

旧版是这样的：

{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}

这种语法是为 Angular 定制的，并内置到了我们的工具链中。在新版 8.0 中我们换成了符合行业标准的动态导入。

新版变成了：

{path: `/admin`, loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule)}

这将改善 VSCode 和 WebStorm 等编辑器对 Angular 的支持能力，现在它们就能正确理解并为用户验证这些导入了。

如果你使用的是 ng update，Angular 将自动更新代码以应用新方式。

CLI 中的构建器 API
就像 Schematics 能让你输入 ng new、ng generate、ng add 和 ng update 一样，我们发布的新版构建器 API 能让你输入 ng build、ng test 和 ng run 来执行构建和部署等任务。

可以查看介绍这些新 API 的博客文章，或查阅API 文档

我们也在与云服务商合作以利用这些 API。现在你可以试一下最新版本的AngularFire，它增加了一个 deploy 命令，让构建和部署到 Firebase 的工作变得非常简单：

ng add @angular/fire
ng run my-app:deploy

安装 AngularFire 后，这个部署命令将以 AngularFire 建议的方式构建和部署你的应用程序。

CLI 中的 Workspace API
以前，使用 Schematics 的开发者必须手动打开并修改 angular.json 来更改 workspace 配置。在 8.0 版本中我们引入了一个新的 API，使开发者能更容易地读取和修改这个文件。

在此查阅有关可用的 Workspace API 更多信息

支持 Web Worker
如果你需要运行一些 CPU 密集任务，使用 Web Workers就能很好地加快应用的运行速度。使用 Web Workers 可以将诸如图像或视频操作之类的任务挂载到后台线程。我们在 angular.io 上使用 Web Workers 进行应用内搜索索引。

你现在可以从 CLI 生成新的 Web Workers，要将新生成的 worker 添加到项目中，只需运行：

ng generate webWorker my-worker

添加了 Web Workers 后就可以在应用程序中正常使用了，CLI 能正确地绑定并拆分它的代码：

const worker = new Worker(`./my-worker.worker`, { type: `module` });

可在此查阅关于 Angular CLI 中 Web Workers 的更多信息

AngularJS 迁移改进
如果你在 AngularJS 应用中使用 location服务，Angular现在有了一个LocationUpgradeModule提供统一的位置服务，将定位任务从AngularJSlocation服务，Angular现在有了一个LocationUpgradeModule提供统一的位置服务，将定位任务从AngularJSlocation 服务迁移到了 Angular Location 服务上。这会改善使用 ngUpgrade，需要在 AngularJS 和 Angular 部分中来回切换的应用的表现。

在此查阅有关统一的Angular 位置服务的更多信息

我们还记录了从 Angular 中懒加载应用中 AngularJS 部分的最佳实践，这样就能更容易地迁移最常用的功能，并且只为应用程序的子集加载 AngularJS。

在此查阅关于懒加载 AngularJS 的更多信息。

新的弃用指南
Angular 的重大版本都是高度稳定的，每个重大版本都会对语义版本做一致管理。对于公共 API 而言，我们对旧功能的支持周期是 N+2 版本，意味着 8.1 中不推荐使用的功能将继续在下两个重大版本（9 和 10）中得到支持。例如，我们在 8.0 中弃用了 platform-webworker 功能。

现在用户更容易在 Angular 中找到弃用和删除的功能说明。查阅新的弃用指南了解所有弃用功能的完整列表。

英文原文：https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27