代号为五角形甜甜圈的ANGLING 5 刚刚发布，随之而来的是一些新功能以及一些内部变化，使ANGLE应用程序更小、执行更快。在这篇文章中，我们将简要回顾一些最重要的变化以及升级的提示。更多细节，请参考公告博客post，，所有变化的深入细节，请参考官方changelog.
Performance
为了让你的应用变得更小、更快，Angel 5包括了一些改变：
- ANGLING CLI v1.5也于今天发布，随之而来的是一个默认启用的构建优化器。构建优化器对构建执行一系列额外的优化，包括更好的树抖动。
- 角度编译器也得到了改进，以实现更快的构建和重建。它现在在引擎盖下使用打字转换。在开发时使用
--aot标志和ng serve命令，现在可以提前和增量构建。在未来的CLI版本中，这应该成为默认设置。 - 不再需要Intl和Reflect多边形填充，这有助于更小的束。请注意，在JIT模式下仍需要反射填充。
- 有了一个新的选项presveWhitespaces，可以从模板代码中删除不重要的空格字符，这可以进一步减小应用程序的最终捆绑包大小。默认情况下，该选项处于关闭状态，因为您可以通过在全局tsconfig.json文件中添加规则并将选项设置为值False，轻松为整个应用程序启用该选项：
1[label tsconfig.json]
2{
3 "compileOnSave": false,
4 "compilerOptions": {
5 "outDir": "./dist/out-tsc",
6 "sourceMap": true,
7 "declaration": false,
8 "moduleResolution": "node",
9 "emitDecoratorMetadata": true,
10 "experimentalDecorators": true,
11 "target": "es5",
12 "typeRoots": ["node_modules/@types"],
13 "lib": ["es2017", "dom"]
14 },
15 "angularCompilerOptions": {
16 "preserveWhitespaces": false
17 }
18}
您还可以按组件精确设置该选项，或仅在特定组件中覆盖项目的默认设置：
1[label app.component.ts]
2import { Component } from '@angular/core';
新增功能
更新模糊或提交
表单字段或整个表单的新选项updateOn可以通过告诉Angular只检查blur或submit事件的有效性来帮助提高性能，而不是默认的更改事件。
例如，给出一个模板驱动的表单，如下所示：
1<form #newUserForm="ngForm" (ngSubmit)="onSubmit(newUserForm)">
2
3 <label for="user-name">User Name:</label>
4 <input type="text" placeholder="User name"
5 required maxlength="25" id="user-name"
6 [(ngModel)]="userName" name="userName">
7
8 <button type="submit" [disabled]="!newUserForm.form.valid">
9 Register
10 </button>
11</form>
现在，您可以将以下内容添加到输入，以便仅在输入模糊时才对其有效性进行角度检查：
1<input type="text" placeholder="User name"
2 required maxlength="25" id="user-name"
3 [(ngModel)]="userName" name="userName"
4 [ngModelOptions]="{updateOn: 'blur'}">
您也可以一次将该规则应用于整个表单：
1<form #newUserForm="ngForm"
2 (ngSubmit)="onSubmit(newUserForm)"
3 [ngFormOptions]="{updateOn: 'blur'}">
4 ...
5</form>
在反应式forms，]的情况下，您可以添加如下选项：
1ngOnInit() {
2 this.newUserForm = this.fb.group({
3 userName: ['Bob', { updateOn: 'blur', validators: [Validators.required] }]
4 });
5}
路由器事件
ANGLE路由器现在公开了一些新的生命周期事件，以便于在更精细的级别上对事件做出反应。新的事件如下：激活开始、激活结束、儿童激活开始、儿童激活结束、保护检查结束、保护检查开始、解决开始和解决结束。
@angular/service-worker
@angular/service-worker，是一个新的包，可以方便地将服务人员添加到你的应用程序中，现在可以使用角度5。我们将在未来的帖子中更深入地研究它的使用。
升级
升级应该是一个没有头脑，因为有很少的破坏性变化。Angular团队还整合了一个方便的工具，使升级尽可能简单。
这里有一些对升级有帮助的提示。这里假设你是从一个角度4应用程序升级的：
- 您可以使用一个命令升级您所有的角度包：
1$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0
2
3# or, using Yarn:
4$ yarn add @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0
- Angel 5现在也依赖于TypeScrip 2.4.2和RxJS 5.5.2，所以你也会想要升级这些包。
- 如果您还没有这样做，请将您项目的<模板>标签更改为<ng-模板>。
- 如果您正在使用Flex Layoutfor ANGLE]，则需要确保升级到最新版本(撰写本文时为Beta10)，因为以前的版本使用了OpaqueToken，后者在ANGLE 5中已被删除。
- 如果您还没有这样做，您可以开始将您的Http调用迁移到角度4.3引入的新HttpClient，。传统的http模块现在已被弃用。
- 如果您使用的是Date、Currency或Percent管道，则可能需要更改语法，因为Angel现在为这些管道使用自己的实现，而不是依赖于浏览器的i18n API。有关所有详细信息，请参阅ChangeLog的I18N portion。
- RxJS版本5.5也是最近发布的，RxJS v5.5.2是Angel 5应用程序的默认版本。您的代码可以完全保持不变，但RxJS正在转移到lettable operators]，以改进树抖动，并使创建自定义操作符变得更容易。因此，开始将可观察到的管道代码转换到新语法可能是个好主意。
下面是一个使用旧语法的快速示例：
1import { Component, OnInit } from '@angular/core';
2
3import { Observable } from 'rxjs/Observable';
4import 'rxjs/add/observable/of';
5import 'rxjs/add/operator/map';
6import 'rxjs/add/operator/filter';
7import 'rxjs/add/operator/do';
8
9@Component({ ... })
10export class AppComponent implements OnInit {
11 myObs = Observable.of('Hello', 'Alligator', 'World!');
12
13 ngOnInit() {
14 this.myObs
15 .do(x => console.log('The do operator is the do operator!'))
16 .filter(x => x.length > 8)
17 .map(x => x.toUpperCase())
18 .subscribe(x => console.log(x));
19 }
20}
...并且使用新的lettable运算符语法的相同示例如下：
1import { Component, OnInit } from '@angular/core';
2
3import { of } from 'rxjs/observable/of';
4import { map, filter, tap } from 'rxjs/operators';
5
6@Component({ ... })
7export class AppComponent implements OnInit {
8 myObs = of('Hello', 'Alligator', 'World!');
9
10 ngOnInit() {
11 this.myObs
12 .pipe(
13 tap(x => console.log('The do operator is now tap!')),
14 filter(x => x.length > 8),
15 map(x => x.toUpperCase())
16 )
17 .subscribe(x => console.log(x));
18 }
19}
请注意如何从一条导入语句导入所有运算符，以及现在如何使用管道方法组合它们。在使用Lettable运算符时，少数运算符会更改名称。例如，DO操作符变为TAP。
🎢有了这一点，你现在应该已经准备好进入角度5，并从由此产生的更快、更小的应用程序中受益。