Angular 5.0 的重要变化

冷不防 2022-05-25 02:15 176阅读 0赞

Angular目前的更新速度已经相当快了，如果你是一个刚开始学习这门框架的初学者，我建议从Angular 4或者Angular5开始学习。Angular 5.0是一个主版本，包含新功能并修复了很多bug。它再次体现了我们把Angular做得更小、更快、更好用的一贯目标，下面介绍一下Angular5.0的一些重要变化要了解详情，请看[CHANGELOG][]。

**一、构建优化器**  
首先，把你应用的某些部分标记为pure，同时删除应用中不必要的东西。其次，构建优化器会从你的应用中删除Angular装饰器代码。装饰器只有编译器会用，运行时不用，可以删掉。上述两项优化都可以减少生成JS包的大小，同时加快应用启动速度

**二、编译器改进**  
为支持递增编译，我们改进了Angular编译器。结果让重新构建加快，特别是对产品构建和AOT构建，效果更明显。我们还增强了装饰器，通过删除空白达到减少包大小的目的。

TypeScript转换  
现在，Angular编译器底层的工作机制是TypeScript转换，从而让递增式重新构建快了很多。TypeScript转换是TypeScript 2.3新增的一个特性，可以让我们深入到标准TypeScript编译管道。

**三、改进的装饰器支持**  
现在支持Lambda和对象字面量useValue、useFactory和data装饰器中的表达式降级（expression lowering）。这样可以使用只能在运行时计算的装饰器中被降级（lower）的值。

因此现在可以不使用命名函数，而改用Lambda函数。换句话说，执行代码不会影响你的d.ts或你的外部API。

Component({
      provider: [{provide: SOME_TOKEN, useFactory: () => null}]
    })
    export class MyClass {}

我们还会将表达式降级，作为useValue的一部分

Component({
      provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]
    })
    export class MyClass {}

**四、国际化的数值、日期和货币管道**  
我们写了新的数值、日期和货币管道，让跨浏览器国际化更方便，不需要再使用i18n的腻子脚本（polyfill）。

在以前版本的Angular中，我们一直依赖浏览器及其i18n API提供数值、日期和货币格式。为此，很多开发者都在使用腻子脚本（polyfill），而结果也不好。很多人反馈说一些常见的格式（如货币）不能做到开箱即用。

而在5.0.0中，我们把这个管道更新成了自己的实现，依赖CLDR提供广泛的地区支持，而且可配置。  
如果你还没条件使用新管理，可以导入DeprecatedI18NPipesModule以降级到旧的行为。

五、StaticInjector代替ReflectiveInjector  
为了消除对更多腻子脚本（polyfill）的依赖，我们用StaticInjector代替了ReflectiveInjector。前者不再需要Reflect，为开发者减少了应用大小。

以前使用ReflectiveInjector.resolveAndCreate(providers);以后使用Injector.create(providers);

**六、提升Zone的速度**  
一方面提升了Zone的速度，另一方面也可以在特别关注性能的应用中绕过它。  
若要绕过它，启动应用时加上noop：

platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: 'noop'}).then( ref => {} );

七、exportAs  
组件和指令中增加了对多名称的支持。这有助于用户实现无痛迁移。通过把指令导出为多个名称，可以在不破坏原有代码的情况下在Angular语法中使用新名称。Angular Material项目已经在其前缀迁移项目中用上了，对其他组件作者肯定也有用。

@Component({
      moduleId: module.id,
      selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
      exportAs: 'matButton, matAnchor',
      ...
    }

**八、修改HttpClient**  
v4.3在@angular/common中推出过HttpClient，用于在Angular中发送请求，它小巧易用。HttpClient受到了开发者的广泛赞誉，因此我们推荐在所有应用中使用它，放弃之前的@angular/http library。

要升级HttpClient，需要在每个模块的@angular/common/http中把HttpModule替换为HttpClientModule，注入HttpClient服务，删除所有map(res => res.json())。

**九、CLI v1.5**  
从Angluar CLI v1.5开始，已经开始支持Angluar v5.0.0，默认生成v5项目。

在这次小版本升级中，我们默认打开了构建优化器，让开发者拿到更小的包。  
我们还修改了使用.tsconfig文件的方式，以更严格地遵守TypeScript标准。此前，如果检测到延迟加载的路由，而且你在tsconfig.json中手工指定了一组files或include，那这些路由会自动化处理。而如今，根据TypeScript规范，我们不再这么干了。默认情况下，CLI对TypeScript的配置中没有files或include，因此多数开发者不会受影响

**十、Angular表单添加updateOn Blur/Submit**  
这样可以根据blur或submit来运行验证和更新值的逻辑了，不必再单纯依赖input事件。

表单对应用很重要，如果有服务端验证，或者验证或更新值会触发较慢的操作，你当然希望它少跑几次。现在你可以在控件层面控制验证和更新值的时机了，也可以在表单层面设置。

此外，你现在可以直接在选项中指定asyncValidators，而不是通过第三个参数指定

**十一、RxJS 5.5**  
我们已经把使用的RxJS更新到5.5.2或更高版本。这个新发布的RxJS可以让开发完全摆脱之前导入机制的副作用，因为我们以新的lettable operators的方式使用了RxJS。这些新操作符消除了副作用，以及之前导入操作符中“patch”方法存在代码切割和“tree shaking”等问题。  
之前的实现方式：

import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/filter';
    names = allUserData
    .map(user => user.name)
    .filter(name => name);

现在的实现方式：

import { Observable } from 'rxjs/Observable';
    import { map, filter } from 'rxjs/operators';
    names = allUserData.pipe(
      map(user => user.name),
      filter(name => name),
    );

此外，RxJS现在发行了一个使用ECMAScript Modules的版本。新Angular CLI会默认拉取这个新版本，让包大小有明显减小。如果你没使用Angular CLI，那还是应该指向这个新版本

**十二、新的路由器生成周期事件**  
我们给路由器添加了新的生命周期事件，让开发者可以跟踪running guard启动到激活完成的各个阶段。这些事件可在有子组件更新时，在一个特定的路由器出口上展示加载动画，或者测量性能。

新的事件（按顺序）是GuardsCheckStart、ChildActivationStart、ActivationStart、GuardsCheckEnd、ResolveStart、ResolveEnd、ActivationEnd、ChildActivationEnd。以下是一个使用这些事件启动和停止加载动画的示例：

class MyComponent {
      constructor(public router: Router, spinner: Spinner) {
        router.events.subscribe(e => {
          if (e instanceof ChildActivationStart) {
            spinner.start(e.route);
          } else if (e instanceof ChildActivationEnd) {
            spinner.end(e.route);
          }
        });
      }
    }

**十三、如何更新Angular项目**  
这里有[更新需知][Link 1]，告诉你整个过程，以及更新前要做哪些事，还有更新应用的步骤，以及做好迎接Angular未来版本的准备等信息。

我们删除很多以前废弃的API（如OpaqueToken），也公布了一些新的废弃项。以上指南会详细介绍这些变更。

[CHANGELOG]: https://github.com/angular/angular/blob/master/CHANGELOG.md
[Link 1]: https://update.angular.io/