Angular v6 正式发布

Angular 6 正式发布

 Angular 6 已经正式发布了!这个主要版本并不关注于底层的框架,更多地关注于工具链,以及使 Angular 在将来更容易快速推动。git

做为发布的一部分,咱们同步了主要的框架包  (@angular/core, @angular/common, @angular/compiler, etc),  Angular CLI, 以及 Angular Material + CDK。如今所有都是做为 6.0.0 发布。咱们理清了它们之间的兼容性。小的更新的补丁将会基于项目的须要发布。github

能够经过每一个项目的变动清单来查看所有的内容: framework, material+cdk, cli.npm

1. ng update

ng update <package>  是一个新的 CLI 命令,用于分析 package.json 并使用其关于 Angular 的知识来更新您的应用。请查看升级手册来查看其行为。json

不只可使用 ng update 来帮助您适配正确版本的依赖项,并保持依赖同步,并且第三方也可使用 schematics 来提供 update 脚本命令。若是您的某个依赖库提供了 ng update 语法,在其有大更新的时候,就能够自动更新您的代码了。bootstrap

ng update 并不会替换您的包管理器,而是使用 npm 或者 yarn 在底层管理依赖,而后更新依赖,ng update 将对您的项目进行必要的转换。安全

例如,ng update @angular/core 将会更新全部的 Angular 框架包,好比:RxJS 和 TypeScript,并运行这些包中可用的 schematics 来保持最新。做为命令的一部分,咱们将会自动安装 rxjs-compat 到您的应用中以平滑迁移。app

咱们期待更多的库和包在随后支持 ng update 语法,咱们已经 听到一些企业库的团队在计划使用 ng update 来自动更新重要的变动升级,以减小开发时间。框架

学习更多关于如何使用 ng update , 开始学习如何建立您本身的 ng update 语法,能够参考 rxjs 的 package.json 的入口,它关联了  collection.json。ide

2. ng add

 另外一个新的 CLI 命令是 ng add,它可使您添加新包变得更加容易。ng add 将使用您的包管理器来下载新的依赖项,并运行安装脚本(以 schematics 实现)。经过配置文件来更新项目。添加额外的依赖项(例如 polyfill 等),或者执行包特定的初始化代码。工具

能够在您的使用 ng new 建立的新项目上试一下下面的命令:

  • ng add @angular/pwa, 经过为您的应用添加 manifest 文件和 service worker 将其转换为 PWA 项目
  • ng add @ng-bootstrap/schematics, 将 ng-bootstrap 添加到项目中
  • ng add @angular/metarial, 安装与设置 Angular Metarial ,并使用 ng generate 添加新的启动组件。
  • ng add @clr/angular@next, 从 VMWare 安装和设置 Clarity。
  • ng add @angular/elements, 为 Angular elements 安装 document-register-element.js 和依赖项。

因为 ng add 基于 schematics 和 Npm ,咱们但愿库和社区支持咱们构建一个 ng add 支持包的生态圈。

请查看 Angular Metarial 的 ng add schemetic ,做为示例来帮助您开始建立您本身的 ng add。

3. Angular Elements

第一个版本的 Angular Elements 支持您在现有的 Angular 应用中经过注册 Angular Component 做为自定义元素。咱们在 angular.io 内容管理系统中使用这种扩展能力,经过嵌入 HTML 来支持动态。这替换掉了手动启动 Angular 组件。

请查看注册 Angular Component 做为 custom element,或者学习更多的 Angular Elements.

已经有一个社区成员发布了 Angular Elements Quick Start, 咱们很是建议您参考。

4. Angular Metarial + CDK component

最大的更新是增长了新的 tree 组件以显示层次结构,遵循 table 组件的模式,CDK 支持了核心 tree 指令,Angular Metarial  经过 Metarial Design 提供了一致的体验,咱们最近提供了一个关于它的内容,能够参考(video, slide ).新的 tree 组件有两种风格:(Metarial 风格)mat-tree 和未修饰的版本 cdk-tree

除了 tree 组件以外,咱们还提供了 badge bottom-sheet-components。徽章用于显示小的帮助信息。例如未读项目数量等等,Bottom-sheet  是移动设备专用的对话框,一般用于提供一系列动做的选项。

@angular/cdk/overlay 是 CDK 中很是有用的包,在新的 v6 版中,其包含新的定位逻辑,以在各类场景下帮助弹出。

5. Angular Metarial Starter Components

一旦您执行 ng add @angular/metarial 将 Metarial 添加到您的项目中,您将获得 3 个新的 starter 组件:

Metarial SideNav

您如今能够生成一个包含 app 名称的 toolbar 和边栏导航的起步组件。

 执行

ng generate @angular/material:material-nav

 

将会生成这样的起步组件。

Metarial Dashboard

您能够生成一个包含动态表格的卡片列表 。

执行

ng generate  @angular/material:material-dashboard

 

能够生成这样的组件。

Material Data Table

您能够生成支持排序、分页的预配置 datasource 的数据表组件。

执行

ng generate  @angular/material:material-table

 

将会生成这样的组件。

在这里查看更多资料:Angular Material  Schematics

6. CLI Workspaces

Angular CLI v6 如今支持包含多个项目的工做空间,好比多个应用或者库。CLI 项目如今将使用 angular.json 来替代 .angular-cli.json 进行配置和构建。

每一个 CLI 能够有多个项目,每一个项目有 target, 每一个 target 有配置文件。

{
   "projects": {
      "my-project-name“: {
             "projectType": "application",
             "architect": {
                      "build": {
                            "configurations”: {
                                    "production": {},
                                    "demo": {},
                                    "staging": {},
                                                      }
                                  },
                       "serve": {},
                       "extrace-i18n": {},
                       "test": {},
                              }

                                    },
              "my-project-name-e2e": {}
                    }
}

 

更多信息请参考:新的配置文件

7. 库的支持

被普遍请求的一个 CLI 特性如今支持了:建立和构建库。我很荣幸介绍它。

ng generate  library <name>

 

该命令将会在您的 CLI 工做空间建立一个库项目,并配置其测试和构建。

更多信息请参考:使用 Angular CLI 建立库

8. Tree Shakable 提供器

为使您的应用尺寸更小,咱们从模块引用服务变成了服务引用模块。这使得咱们能够仅仅打包模块中注入到代码中的服务。

之前

@NgModule({
   ...
   providers: [ MyService ]
})
export class AppModule {}

 

其中,服务的定义

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
   constructor() {}
}

 

之后的用法

不须要在模块中引用。

import { Injectable } from '@angular/core';

@Injectable( {
    providedIn: 'root',
})
export class MyService {
   constructor() {}
}

 

更多信息,参考依赖注入

9. 动画性能改进

咱们已经更新了动画实现,再也不须要 Web animations polyfill,这意味着您能够从应用中删除这个 polyfill,并节省大约 47K 的打包尺寸,同时提高了在 Safari 中的性能。

10. RxJS v6

Angular 已经升级到 RxJS v6。RxJS 是 Angular 的一个依赖项,其在几周前正式发布了 v6。RxJS v6 带来了多个重要的更新,还提供了反向兼容库 rxjs-compat,能够保持您的应用继续工做。

RxJS 进行了从新组织以便于 Tree shakable, 以确保只有用到的 RxJS 部分打包到应用中。

若是您使用 ng update, 您的应用将会保持工做,您能够从 RxJS 5.5 迁移到 6 获得更多信息。

11. 长期支持

咱们扩展了咱们的长期支持条款到全部主要发布版本。

之前,咱们声明只有 v4-v6 是长期支持的版本。可是为了是的从某个主要版本升级到下一个更加容易,并给予大的项目更多的时间来计划升级,咱们决定扩展到支持从 v4 开始的全部主要版本。

每一个主要发布将会支持 18 个月,包括 6 个月的活动开发和 12 个月的关键 bug 修复和安全补丁。

更多信息能够参考 Angular 版本和发布

12. 如何更新到 6.0.0

访问 update.angular.io 来获得升级应用的信息和指导。

升级一般包括 3 步,并能够从 ng update 工具得到好处。

  1. 升级 @angular/cli
  2. 升级 Angular 框架包
  3. 升级其它依赖

对于咱们来讲,让开发者保持最新版本的更新特别重要,因此,若是您有什么建议请让咱们知道。

13. Ivy 怎么样了?

关于咱们下一代的渲染引擎 Ivy,Ivy 当前处于开发阶段,还不是 v6 的一部分。在随后的几个月,咱们将会宣告 Ivy 的一个预览版。

See Also