Angular6.0发布 | 易学教程

Angular v6 新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。

Angular v6 是统一整体框架、Material 和 CLI 三大 Angular 组件的第一个版本，此次更新更多地关注于工具链上，以使其具有更好的可移植性。

此次更新信息如下：

更新依赖关系：

@angular/core 现在依赖于：

TypeScript 2.7
RxJS 6.0.0
tslib 1.9.0

@angular/platform-server 现在依赖于 Domino 2.0

特性的小改动：

animations: 只能使用 WA-polyfill 和 AnimationBuilder
animations: 在转换匹配器中暴露元素和参数
common: 在 NgIf 中使用非模板元素时更好的错误消息
common: 导出函数来格式化数字，百分数，货币和日期
compiler: 实现“enableIvy”编译选项
core: 添加绑定名称到内容更改错误

bug 修复：

即使在 noOp 动画期间也要报告正确的 totalTime 值
避免在路由器返回/刷新期间插入动画
修复增加/减少别名示例
修正 Observable 方法的映射

更新功能信息:

1. ng update

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

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

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

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

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

学习更多关于如何使用 ng update , 开始学习如何创建您自己的 ng update 语法，可以参考 rxjs 的 package.json 的入口，它关联了 collection.json。

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": {}
                    }
}

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

库的支持被广泛请求的一个 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 来得到升级应用的信息和指导。

来源：https://www.cnblogs.com/besuccess/p/9001910.html

标签

angular

rxjs

update