[译]Angular 5：升级和新功能的总结

时间：2022-12-11 17:51:45

代号为pentagonal-donut的Angular 5刚刚发布，它带来了一些新功能以及一些内部变化，这些会让Angular应用变得更小，执行变得更快。 在这篇文章中，我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息，请参阅公告博客帖子，有关所有更改的详细信息，请参阅官方更新日志。

性能

这是Angular 5包含的一些改变，它会让你的应用变得更小更快：

  • Angular CLI v1.5也是今天发布的，它有一个默认启用的构建优化器。 构建优化器在构建时会执行一系列额外的优化，包括更好的tree shaking。
  • 为了加快构建和重构建，Angular编译器也进行了改进。 它现在在引擎下使用TypeScript转换。ng serve命令使用--aot标记让 AOT（Ahead of time）和增量构建在开发时成为了可能。 这应该成为未来CLI版本的默认值。
  • intl和Reflect polyfills不再需要，这有助于缩小程序包。 请注意，在JIT模式下仍然需要Reflect polyfills。
  • 有一个新的选项，preserveWhitespaces，从模板代码中删除非重要的空白字符，这可以进一步减少你的应用程序的最终包的大小。 该选项默认是关闭的，只要将规则添加到全局tsconfig.json文件并将该选项设置为false，就可以轻松地打开整个应用程序：

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"]
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

你也可以在每个组件的基础上设置选项，或者仅在特定组件中覆盖项目的默认值：

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  preserveWhitespaces: false
})
export class AppComponent {
  // ...
}

新特性

updateOn blur或submit

表单字段或整个表单新增了选项updateOn，它可以让Angular仅在blur或submit事件时检查有效性，而不是默认的变更事件，这有助于提高性能。

例如，给定一个模板驱动的表单，如下所示：

<form #newUserForm="ngForm" (ngSubmit)="onSubmit(newUserForm)">

  <label for="user-name">User Name:</label>
  <input type="text" placeholder="User name"
         required maxlength="25" id="user-name"
         [(ngModel)]="userName" name="userName">

  <button type="submit" [disabled]="!newUserForm.form.valid">
    Register
  </button>
</form>

你现在可以输入以下内容，让Angular仅在输入触发blur事件时才进行有效性检查：

<input type="text" placeholder="User name"
      required maxlength="25" id="user-name"
      [(ngModel)]="userName" name="userName"
      [ngModelOptions]="{updateOn: 'blur'}">

你也可以一次性对整个表单应用规则：

<form #newUserForm="ngForm"
      (ngSubmit)="onSubmit(newUserForm)"
      [ngFormOptions]="{updateOn: 'blur'}">
  ...
</form>

在响应式表单，你可以添加这样的选项：

ngOnInit() {
  this.newUserForm = this.fb.group({
    userName: ['Bob', { updateOn: 'blur', validators: [Validators.required] }]
  });
}

路由事件

Angular路由器现在新增了一些的生命周期事件，以便在更细粒度的级别上对事件做出响应。 新事件如下：ActivationStart，ActivationEnd，ChildActivationStart，ChildActivationEnd，GuardsCheckEnd，GuardsCheckStart，ResolveStart和ResolveEnd。

@angular/service-worker

Angular 5现在提供了一个新的包@angular/service-worker，它可以让我们很方便地将服务worker添加到应用程序中。我们将在将来的文章中深入探讨它的使用。

升级

因为重大改变很少，升级应该是一个很简单的工作。 Angular团队还组合了一个方便的工具，让升级尽可能简单。

这里有一些可以帮助升级的点。 这假定你是从一个Angular 4应用升级的：

  • 你可以使用一个命令升级所有的Angular软件包：
$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0

# or, using Yarn:
$ yarn add @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0
  • 现在Angular 5依赖于TypeScript 2.4.2和RxJS 5.5.2，所以你也要升级这些包。
  • 如果你还没有这样做，请将项目的<template>标签更改为<ng-template>。
  • 如果你正在使用Flex Layout for Angular，则需要确保升级到最新版本（撰写本文时为beta 10），因为之前的版本使用了OpaqueToken，而在Angular5已把它移除。
  • 如果你还没有这样做，你可以开始将http调用迁移到Angular 4.3中引入的新HttpClient。传统的Http模块现在已经被弃用了。
  • 如果你使用日期，货币或百分比管道，则可能需要更改语法，因为Angular现在使用自己的实现来管理这些管道，而不是依靠浏览器的i18n API。 有关所有详细信息，请参阅变更日志的i18n部分。
  • RxJS 5.5版最近也发布了，RxJS v5.5.2是Angular 5应用程序的默认版本。 你的代码可以保持完全一样，但是RxJS正在转移到lettable operators ，以改善tree shaking，并使其更容易创建自定义运算符。 因此，开始将可观察管道代码转换为新的语法可能是一个好主意。

以下是旧语法的一个简单例子：

import { Component, OnInit } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/do';

@Component({ ... })
export class AppComponent implements OnInit {
  myObs = Observable.of('Hello', 'Alligator', 'World!');

  ngOnInit() {
    this.myObs
      .do(x => console.log('The do operator is the do operator!'))
      .filter(x => x.length > 8)
      .map(x => x.toUpperCase())
      .subscribe(x => console.log(x));
  }
}

...新的可用操作符语法的例子变成：

import { Component, OnInit } from '@angular/core';

import { of } from 'rxjs/observable/of';
import { map, filter, tap } from 'rxjs/operators';

@Component({ ... })
export class AppComponent implements OnInit {
  myObs = of('Hello', 'Alligator', 'World!');

  ngOnInit() {
    this.myObs
      .pipe(
        tap(x => console.log('The do operator is now tap!')),
        filter(x => x.length > 8),
        map(x => x.toUpperCase())
      )
      .subscribe(x => console.log(x));
  }
}

注意所有操作符是如何从一个导入语句中导入的，以及它们是如何使用pipe方法合并的。 当使用可用操作符时，一些操作符更改了名称。 例如，do操作符变成tap。

有了这个，你现在应该已经准备好进入Angular 5，并从更快更小的应用程序中受益。

原文：Angular 5: Upgrading & Summary of New Features

标签：

相关文章