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

Angular 8 - 更小的包,CLI API 以及与生态保持一致

Angular 8 现在发布了!这是跨越整个平台的重要发布,包括框架、Angular Material,与主版本同步的 CLI。该发布改进了应用程序在现代浏览器上的启动时间,提供了开发 CLI 的新的 API,保持了 Angular 与业界生态和更多新的 Web 标准的同步。

如何升级到版本 8

访问 update.angular.io 可以得到详尽信息和指导。对于大多数开发者来说,只要下面的一个命令就可以完成此次升级:

ng update @angular/cli @angular/core

  

默认的区分加载

区分加载 是浏览器基于其自身的能力在现代或者遗留 JavaScript 之间选择的过程。现在,默认对你的应用程序执行现代的 ( es2015 ) 和 遗留 ( es5 ) 构建,我们可以从中获取好处。当用户加载应用程序的时候,它们可以自动使用需要的构建包。

如果你使用 ng update 命令,我们会升级你的 tsconfig.json 来帮助你从中获益。我们的 CLI 会检查你的 tsconfig.json 中的 target JavaScript 等级来决定是否从区分加载中获益。

{
"compilerOptions": {

"module": "esnext",
"moduleResolution": "node",

"target": "es2015",

},

target 设置为 es2015 的时候,我们会生成并标记两种发布包。

在运行时,浏览器使用在 <script> 元素上的 attribute 来加载正确的包。

  • <script type="module" src="..."> 加载现代版的 JavaScript

  • <script nomodule src="..."> 加载遗留版的 Javascript

对于 angular.io 来说,对于现代浏览器,我们的初始化包节省了超过 40Kb 尺寸。通过来自社区的反馈,我们听到了应用程序通常节省了 7 - 20% 的尺寸,基于现代 JavaScript 的特性获取了增益。

使用动态导入的路由配置

我们强烈建议使用 router 延迟加载应用程序的各个部分。这可以通过在路由配置中使用 loadChildren 关键字来实现。

以前看起来是这样的:

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

  

该语法是 Angular 定制语法,与工具链构建在一起。在 Angular 8 中,我们迁移到了工业标准的 dyanmic imports

现在,这样使用:

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

  

CLI 中的构建器 API

与 Schematics 允许你利用 ng newng generateng adng update 同样的方式, 我们发布了新的构建器 API,允许你利用 ng buildng testng run 来执行你期望的构建和发布。

请查阅 我们关于新 API 的博客

或者阅读:API 文档

我们还已经开始与云供应商合作来从这些 API 中获益。现在你可以尝试最新版本的 AngularFire ,它增加了一个 ng deploy 命令,使得构建和发布到 Firebase 比以前更加简单:

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

  

一旦安装之后,部署命令将通过 AngularFire 同时进行构建和发布应用程序。

CLI 中的工作区 API

以前使用 Schematics 的开发者不得不手动大龄和修改他们的 angular.json 文件来修改工作区配置。使用 8.0,我们引入了一个新的 API 使得该文件更易读和修改。

请参考 Workspace API

Web Worker 支持

如果你需要做任何 CPU 密集的处理的时候,Web worker 是加速应用程序的非常棒的途径。Web worker 允许你将工作转移到后台线程上,比如图像或者视频处理,我们在 angular.io 中使用 Web worker 进行应用内的搜索索引。

现在,你可以通过 CLI 来生成一个 Web worker。添加 worker 到项目中,可以执行:

ng generate webWorker my-worker

  

一旦你有了 Web worker,你可以在应用程序中正常使用它,CLI 还可以帮助你打包并对它正确地进行代码分割。

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

  

请阅读 web worker in the Angular CLI

AngularJS 迁移改进

如果你在 AngularJS 应用程序中使用了 $location service,Angular 现在提供了 LocationUpgradeModule ,允许将 Location 服务统一从 AngularJS 的 $location 切换到 Angular 的 Location 服务。 这应该可以改进需要在应用程序中同时使用 AngularJS 和 Angular 的应用程序。

请查阅 Unified Angular Location Service

我们还提供了关于在 Angular 中延迟加载 AngularJS 应用部分的最佳实践文档,首先使得常见使用的功能容易迁移,你的应用程序仅仅加载 AngularJS 的子集。

请查阅 Lazy Loading AngularJS

新的不建议使用手册

我们提供更高等级的跨主要版本的维护语义版本稳定性。对于我们的 Public API,我们提供 N + 2 支持。这意味着如果一个特性从 8.1 开始不建议使用,我们将在下两个主要版本继续支持 ( 9 和 10 ) 。例如,我们在版本 8 中不建议的 platform-webworker。

我们在使得在 Angular 中更容易发现不建议使用的内容并删除它。对于所有不建议使用的功能列表,请查阅新的 不建议使用手册

Ivy & Bazel

我们知道有大量的对于即将到来的可选预览的期待。我们将在下周的博客中进行单独更新,

Angular 8 发布的更多相关文章

  1. Angular CLI: 发布到 GitHub Pages

    发布 Angular 应用的简单方式是使用 GitHub Pages. 首先需要创建一个 GitHub 账号,随后,为您的项目创建一个仓库.记下 GitHub 中的用户名和项目名称. 例如,我的 Gi ...

  2. Angular cli 发布自定义组件

    建立工作空间 ng new Test --style=scss //Angular6.x及以下可以使用这个命令指定使用.scss样式表 ng new Test                      ...

  3. Angular Beijing 发布

    为了帮助 Angular 在国内的推广,申请了一个新的域名 www.ngbeijing.cn,  我将 Angular 相关的优秀文章集中在这个站点,欢迎大家访问. 刚刚转载了几篇优秀的文章. Ang ...

  4. 从零开始构建 Wijmo & Angular 2 小应用

    中秋之际,Angular 团队发布 Angular 2 正式版,一款不错的图表控件Wijmo当天宣布支持 . Angular 2移除和替代了 Angular 1.X 中的 directives, co ...

  5. Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

    Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...

  6. 如何选择前端框架:ANGULAR VS EMBER VS REACT

    最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发 ...

  7. [译] Angular 2 VS. React: 血色将至

    Angular 2 VS. React: 血色将至 原文链接:https://medium.com/@housecor/angular-2-versus-react-there-will-be-blo ...

  8. Wijmo Angular 2 小应用

    Wijmo & Angular 2 小应用 中秋之际,Angular 团队发布 Angular 2 正式版,一款不错的图表控件Wijmo当天宣布支持 . Angular 2移除和替代了 Ang ...

  9. 开发Angular库的简单指导(译)

    1. 最近工作上用到Angular,需要查阅一些英文资料,虽然英文非常烂,但是种种原因又不得不硬着头皮上,只是每次看英文都很费力,因此决定将一些比较重要的特别是需要反复阅读的资料翻译一下,以节约再次阅 ...

随机推荐

  1. 微服务学习一 微服务session 管理

    集群和分布式架构中: session管理有三种方法: 1: Cookie: 将Session对象保存在Cookie,保存在浏览器端.浏览器发送请求的时候,会把整个session放在请求里一起发送到se ...

  2. BluetoothFindNextRadio 函数

    BOOL BluetoothFindNextRadio( HBLUETOOTH_RADIO_FIND hFind, HANDLE* phRadio ); BluetoothFindNextRadio找 ...

  3. mysql四个默认数据库

    1.Master数据库  Master数据库记录了Sqlserver所有的服务器级系统信息,所有的注册帐户和密码,以及所有的系统设置信息,还记录了所有用户定义数据库的存储位置和初始化信息. 2.Tem ...

  4. Koa1 框架

    安装创建项目: 1.一定要全局安装(koa1.2和koa2都己经支持) npm install koa-generator -g 2.koa1 生成一个test项目,切到test目录并下载依赖 koa ...

  5. 由hibernate配置cascade而导致的软件错误,并分析解决此问题的过程

    本文与上一篇文章的软件背景相同,是一个安装部署的工具,这个工具会生成整套系统部署用的xml文件. 这个工具中有一个“克隆”功能,当安装包有新版本后,可以克隆之前的xml版本,并在其基础上做少许修改来适 ...

  6. Linux awk指令详解

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  7. Win10不能直接拖文件/Foxmail不能拖文件解决办法

    在桌面新建一个文本文档   打开文本文档复制下面的文字然后保存. Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\M ...

  8. iis应用程序池没有fromwork 4.0-----安装iis

    找到已经安装的目录  C:\Windows\Microsoft.NET\Framework\v4.0.30319  以管理员身份运行一下就ok 安装iis 控制面板-程序与功能-打开与关闭window ...

  9. C#面向对象三大特性之一:封装

    面向对象的三大特性:封装.继承.多态. 1.封装概念 封装:每个对象都包含有它能进行操作的所有信息,这个特性称为封装.这样的方法包含在类中,通过类的实例来实现. 2.封装的优点 A.良好的封装能够减少 ...

  10. Boost Python官方样例(一)

    配置环境 $ cat /etc/os-release NAME="Ubuntu" VERSION="16.04 LTS (Xenial Xerus)" ID=u ...