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

栏目: 编程语言 · AngularJS · 发布时间: 5年前

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

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

如何更新到 Angular 8.0.0 版本

用户可以访问 update.angular.io 以获取新版详细信息和升级指导,大多数开发者可以使用以下命令开始更新:

复制代码
ngupdate@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 会生成并标记两个包。

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

复制代码
<scripttype=“module”src=“...”>// 新版 JS
<scriptnomodulesrc=“...”>// 老式 JS

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

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

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 的工作变得非常简单:

复制代码
ngadd@angular/fire
ngrunmy-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 添加到项目中,只需运行:

复制代码
nggeneratewebWorker my-worker

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

复制代码
const worker =newWorker(`./my-worker.worker`, {type: `module` });

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

AngularJS 迁移改进

如果你在 AngularJS 应用中使用 l o c a t i o n A n g u l a r L o c a t i o n U p g r a d e M o d u l e A n g u l a r J S

location 服务迁移到了 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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

信息架构

信息架构

[美] 路易斯·罗森菲尔德、[美] 彼得·莫尔维莱、[美] 豪尔赫·阿朗戈 / 樊旺斌、师蓉 / 电子工业出版社 / 2016-5-1 / 128.00元

本书的前三个版本都是信息架构领域的开山著作。其中描述了信息组织的普遍和永恒原则,这一原则也适用于不断增长的移动世界。在第4版中,作者运用大量最新的插图和例子为这些原则提供了当前实践中的情境,验证了那些与技术和供应商无关的工具,以及那些经受住时间考验的技术。一起来看看 《信息架构》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码