Angular 6：升级和新功能汇总

ANGLING 6 刚刚发布，虽然新功能的数量很少，但在工具方面发生了很大变化。新添加的工具特别有助于促进应用程序的升级和添加新的库。在这篇文章中，我们将分析Angel6的新特性，并介绍如何将应用程序升级到这个新版本。

新增功能

下面是主要新增功能的摘要。请注意，这份清单并不详尽，您可以参考[结论中的链接](# 进一步阅读)了解更多细节。

ng更新和ng添加

ANGLE CLI获得两个主要的新命令：更新和添加。

有了ng更新，更新一个角度应用程序现在只需一条命令。多亏了原理图，第三方库也可以连接到新命令，从而使更新这些库变得很容易。在幕后，该命令将与项目的Package.json文件一起使用，并使用项目的包管理器(NPM或Yarn)，并在需要的地方应用代码转换，以更新代码或必要的配置文件。

与ng update类似，新的ng add命令可以通过一个简单的命令在项目中添加和配置新的库。例如，安装和设置ANGLING Material]过去需要相当多的步骤，但现在只需一个命令即可完成：

1$ ng add @angular/material

同样，使用ng Add ，第三方库可以为它创建自己的原理图。

其他CLI变更

使用CLI的ANGLE项目在历史上有一个名为.Angel-cli.json的配置文件。在CLI版本6中，该文件现在重命名为angular.json，其结构也发生了变化。

ng new现在生成一个带有默认应用程序的工作区。可以将其他应用程序添加到工作区，从而使一个项目下有多个应用程序成为可能。图书馆现在也是一等公民，可以添加到工作空间并使用CLI生成：

1$ ng g library ng-fancy-lib

角度元素

在角度6中，我们得到了角度元素 的初始版本，这个项目将使开发组件变得容易，这些组件可以作为自定义elements]嵌入到其他角度项目中，并最终嵌入到其他框架中，甚至只需使用普通的Java脚本。

我们将在另一篇文章中介绍Angular Elements，同时你可以观看这篇[精彩介绍](https：www.youtube.com/watch? v=4u9_kdkvTsc)由Angular Firebase的Jeff Delaney编写。

类型脚本2.7&RxJS 6

角度6现在取决于打印脚本2.7和RxJS 6。

RxJS 6有了新的更简单的导入路径，并且使用了可链接的操作符，而不是可管道化的操作符。这使得库作为一个整体更容易被树摇动，并将导致更小的包。RxJS 6包含一些突破性的变化，但一个新的包rxjs-compat可以与RxJS 6一起安装，以在将代码升级到新语法时提供兼容层。

下面是一个示例导入，它演示了主要的新导入路径：

1// creation and utility methods
2import { Observable, Subject, pipe } from 'rxjs';
3// operators all come from `rxjs/operators`
4import { map, takeUntil, tap } from 'rxjs/operators';

如你所见，记住从哪里导入东西要容易得多！至于链式运算符和管道运算符，这里有一个简单的区别示例：

 1// before
 2myObs
 3  .do(console.log)
 4  .map(x => x * 2)
 5  .subscribe(x => {
 6    console.log('Value is', x);
 7  });
 8
 9// after
10myObs
11  .pipe(
12    tap(console.log),
13    map(x => x * 2)
14  )
15  .subscribe(x => {
16    console.log('Value is', x);
17  });

<$>[注意]注意do 运算符已重命名为** Tap** ，因为do在JavaScript中是保留关键字。<$>

常春藤渲染器

一个代号为Ivy的渲染器的重写最近也引起了很多关注。新的渲染器应该明显更小，这将允许更小的最终应用程序的捆绑大小。目前还没有一个稳定的版本，但当API完成和稳定时，它将作为一个可选的替代品。

升级

ANGLE团队已经整合了一个工具ANGLE更新指南，)，它可以轻松地将您的ANGLE安装迁移到最新版本。在很大程度上，升级将是遵循这一指南的问题。

尽管如此，你还是会在下面找到一个升级到角度5.2应用程序所需步骤的摘要，该应用程序也使用角度材质来升级到角度6。

<$>[注意]在开始之前，请确保您的应用程序已经在使用新的HttpClient module]，而不是旧的Http模块。<$>

<$>[警告]如果您的应用程序依赖于peerDependency为角度5的包，则必须等到该包更新为支持角度6。<$>

更新CLI

全局和本地更新到项目的角度CLI版本6：

1# updating using npm
2$ npm i -g @angular/cli
3$ npm i @angular/cli
4
5# using Yarn
6$ yarn global add @angular/cli
7$ yarn add @angular/cli

运行ng更新

现在，您可以对CLI、角核和角材质运行ng update。

首先，更新CLI会将配置文件转换为新格式(angular.json)，并更新各种项目配置：

1$ ng update @angular/cli

接下来，对角核包运行ng upate：

1$ ng update @angular/core

然后还可以运行ng upate来更新角度材质和RxJS：

1$ ng update @angular/material
2$ ng update rxjs

<$>[注]运行不带参数的ng update会给出一个可以使用该命令更新的包列表。<$>

升级RxJS

对于RxJS，导入路径的语法需要更新，操作符需要通过管道连接在一起，而不是链接在一起。通常情况下，这意味着您必须在使用RxJS导入和操作符的任何地方更新代码，但幸运的是，有一个包可以处理大部分繁重的工作：rxjs-tslint。

您可以全局安装该程序包：

1$ npm i -g rxjs-tslint
2
3# or, using Yarn
4$ yarn global add rxjs-tslint

然后，您可以运行指向应用程序的tsconfig.app.json文件的rxjs-5-to-6-Migrate命令，该文件是项目的src文件夹：

1$ rxjs-5-to-6-migrate -p src/tsconfig.app.json

<$>[注意]您可能需要多次运行该命令。在一个不平凡的代码库上，会有很多变化，所以你会想看看git的差异，以确保一切看起来都很好。<$>

一旦rxjs-tslint 完成了它的工作，你就会想要运行你的测试，并充分使用这款应用来修复任何出现的问题。例如，该工具可能遗漏了RxJS6的一些语法更改，或者由TypeScrip2.7带来的新类型错误。

在一切看起来都很好之后，您需要从项目中删除rxjs-Compat包(保留它会给您的应用程序包增加不必要的膨胀)：

1$ npm uninstall rxjs-compat
2
3# or, using Yarn
4$ yarn remove rxjs-compat

进一步阅读

您可能希望更深入地研究最新的添加和迁移步骤。以下是一些关键资源，可以帮助您做到这一点：

Published At
Categories with 技术
Tagged with
comments powered by Disqus