微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

Angular 5.0 来了,有这些大变化

2017-11-03 17:30 前端大全

(点击上方公众号,可快速关注)


英文: Stephen Fluin   译文:众成翻译  

http://zcfy.cc/article/4494

如果好文章投稿,点击 → 了解详情


我们很高兴地宣布Angular 5.0.0——五角形甜甜圈发布啦!这又是一个主版本,包含新功能并修复了很多bug。它再次体现了我们把Angular做得更小、更快、更好用的一贯目标。



以下简单介绍v5的重大变化。要了解详情,请看changelog。


构建优化器


5.0.0开始,通过CLI执行的产品构建默认使用构建优化器。


构建优化器是CLI中的一个工具,它基于我们对你Angular应用的理解,可以把构建后的包变得更小。


构建优化器有两个主要任务。首先,把你应用的某些部分标记为pure,以便原有工具利用它改进“tree shaking”的优化效果,同时删除应用中不必要的东西。


其次,构建优化器会从你的应用中删除Angular装饰器代码。装饰器只有编译器会用,运行时不用,可以删掉。上述两项优化都可以减少生成JS包的大小,同时加快应用启动速度。


Angular Universal状态转交API及对DOM的支持


这样更便于在服务端和客户之间共享应用状态。


Angular Universal是一个帮助开发者执行服务端渲染(SSR)的项目。服务端渲染生成的HTML对不支持JS的蜘蛛和爬虫友好,同时有助于提升用户感知性能。


在5.0.0中,开发团队添加了ServerTransferStateModule及对应的BrowserTransferStateModule。这个模块可以帮开发者在服务端渲染生成的内容中加入相关信息,然后传送给客户端,从而避免重复生成。这对于通过HTTP获取数据的场景是很有用的。通过把状态从服务器传送到客户端,开发者就不用再发第二次HTTP请求了。状态转交的相关文档几周后会发布。


Angular Universal团队还把平台服务器Domino加到了平台服务器中。Domino支持在服务器端环境下更多的开箱即用的DOM操作,可以改进我们对非服务端第三方JS及组件库的支持。


编译器改进


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


TypeScript转换


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


在打开AOT标签的情况下,运行ng serve就可以利用上述机制。


ng serve --aot


建议大家都试一下。将来这个配置会成为CLI的默认值。很多项目都有性能问题,涉及上千组件,我们希望各种规模的项目都能从这些改进中受益。


在执行https://angular.io 的递增AOT构建时,新编译器管道可节省95%的构建时间(在我们开发机上测试的结果是从40多秒减少为不到2秒)。


我们的目标是让AOT编译快到能开发者用它开发的程度。现在,我们已经冲进了2秒以内,因此将来的CLI中可能会默认开启AOT。


作为向本次转换过渡的一步,我们不再需要genDir,而outDir也变了:现在,我们会把为包生成的文件都打到node_modules里。


保留空白


过去编译器会忠实地复现并在模板中包含制表符、换行符和空白。现在你可选择是否在组件和应用中包含空白了。


可以在每个组件的装饰器中指定这个配置,而当前的默认值为true。


@Component({

  templateUrl: 'about.component.html',

  preserveWhitespaces: false

}

export class AboutComponent {}


或者也可以在tsconfig.json中进行全局配置,其中该项默认值也是true。


{

  "extends": "../tsconfig.json",

  "compilerOptions": {

    "outDir": "../out-tsc/app",

    "baseUrl": "./",

    "module": "es2015",

    "types": []

  },

  "angularCompilerOptions": {

    "preserveWhitespaces": false

  },

  "exclude": [

    "test.ts",

    "**/*.spec.ts"

  ]

}


一般规则是组件级配置要覆盖应用级配置。开发团队打算将来把默认值改成false,默认为开发者节省空间。不要担心你的<pre>标签,编译器会智能处理它们。


改进的装饰器支持


现在支持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提供广泛的地区支持,而且可配置。以下是我们对v4和v5所做的比较:a document comparing the pipe behavior between v4 and v5。


如果你还没条件使用新管理,可以导入DeprecatedI18NPipesModule以降级到旧的行为。


StaticInjector代替ReflectiveInjector


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


以前


ReflectiveInjector.resolveAndCreate(providers);


以后


Injector.create(providers);


提升Zone的速度


一方面提升了Zone的速度,另一方面也可以在特别关注性能的应用中绕过它。


若要绕过它,启动应用时加上noop:


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


这里有一个完整的例子:the example ng-component-state project。


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,而不是通过第三个参数指定。


模板驱动的表单


以前


<input name="firstName" ngmodel=""/>


以后


<input name="firstName" ngmodel=""/>


或者


<form [ngFormOptions]="{updateOn:'submit'}">


反应式表单


以前


new FormGroup(value);


new FormControl(value, [], [myValidator])


以后


new FormGroup(value, {updateOn: 'blur'}));


new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})


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,那还是应该指向这个新版本。相关文档在此:Build and Treeshaking。


新的路由器生成周期事件


我们给路由器添加了新的生命周期事件,让开发者可以跟踪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 Update Guide,告诉你整个过程,以及更新前要做哪些事,还有更新应用的步骤,以及做好迎接Angular未来版本的准备等信息。


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


已知问题


当前已知与source map相关的问题。某些source map会报“未定义的源”错误。


https://github.com/angular/angular/issues/19840



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 Vue 2.5 发布了:15篇前端热文回看 想成为前端开发工程师,不能再错过这次机会了 颤抖吧!阿里出了个不明觉厉的技术学习包,光PPT就有2个G 前端开发工程师必须关注的几个性能指标 一道面试题引发的对 JS 类型转换的思考
猜您喜欢 一个Linux系统管理员走进了一家药店 专治前端焦虑的学习方案 后人类的 N 种可能 写给茫然的你!我们并不需要更多会写代码的设计师! 校园招聘【宣讲行程】都在这了!