我们很高兴地宣布 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 就可以利用上述机制。
|
1
|
ng serve —aot
|
建议大家都试一下。将来这个配置会成为 CLI 的默认值。很多项目都有性能问题，涉及上千组件，我们希望各种规模的项目都能从这些改进中受益。
在执行 https://angular.io 的递增 AOT 构建时，新编译器管道可节省 95%的构建时间（在我们开发机上测试的结果是从 40 多秒减少为不到 2 秒）。
我们的目标是让 AOT 编译快到能开发者用它开发的程度。现在，我们已经冲进了 2 秒以内，因此将来的 CLI 中可能会默认开启 AOT。
作为向本次转换过渡的一步，我们不再需要 genDir，而 outDir 也变了：现在，我们会把为包生成的文件都打到 node_modules 里。
保留空白
过去编译器会忠实地复现并在模板中包含制表符、换行符和空白。现在你可选择是否在组件和应用中包含空白了。
可以在每个组件的装饰器中指定这个配置，而当前的默认值为 true。
|
1
2
3
4
5
|
@Component({
templateUrl: ‘about.component.html’,
preserveWhitespaces: false
}
export class AboutComponent {}
|
或者也可以在 tsconfig.json 中进行全局配置，其中该项默认值也是 true。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
{
“extends”: “../tsconfig.json”,
“compilerOptions”: {
“outDir”: “../out-tsc/app”,
“baseUrl”: “./”,
“module”: “es2015”,
“types”: []
},
“angularCompilerOptions”: {
“preserveWhitespaces”: false
},
“exclude”: [
“test.ts”,
“**/*.spec.ts”
]
}
|
一般规则是组件级配置要覆盖应用级配置。开发团队打算将来把默认值改成 false，默认为开发者节省空间。不要担心你的 <pre> 标签，编译器会智能处理它们。
Read more about preserveWhitespaces on our docs site
改进的装饰器支持
现在支持 Lambda 和对象字面量 useValue、useFactory 和 data 装饰器中的表达式降级（expression lowering）。这样可以使用只能在运行时计算的装饰器中被降级（lower）的值。
因此现在可以不使用命名函数，而改用 Lambda 函数。换句话说，执行代码不会影响你的 d.ts 或你的外部 API。
|
1
2
3
4
|
Component({
provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}
|
我们还会将表达式降级，作为 useValue 的一部分。
|
1
2
3
4
|
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 以降级到旧的行为。
Read more about the changes to our i18n pipes in the changelog
StaticInjector 代替 ReflectiveInjector
为了消除对更多腻子脚本（polyfill）的依赖，我们用 StaticInjector 代替了 ReflectiveInjector。前者不再需要 Reflect，为开发者减少了应用大小。
以前
ReflectiveInjector.resolveAndCreate(providers);
以后
Injector.create(providers);
提升 Zone 的速度
一方面提升了 Zone 的速度，另一方面也可以在特别关注性能的应用中绕过它。
若要绕过它，启动应用时加上 noop：
|
1
|
platformBrowserDynamic().bootstrapModule(AppModule, {ngZone: ‘noop’}).then( ref => {} );
|
这里有一个完整的例子：the example ng-component-state project。
exportAs
组件和指令中增加了对多名称的支持。这有助于用户实现无痛迁移。通过把指令导出为多个名称，可以在不破坏原有代码的情况下在 Angular 语法中使用新名称。Angular Material 项目已经在其前缀迁移项目中用上了，对其他组件作者肯定也有用。
示例
|
1
2
3
4
5
6
7
8
|
@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，而不是通过第三个参数指定。
模板驱动的表单
以前
|
1
|
<input name=“firstName” ngmodel=“”/>
|
以后
|
1
|
<input name=“firstName” ngmodel=“”/>
|
或者
|
1
|
<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”等问题。
不再这样:
|
1
2
3
4
5
6
|
import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/add/operator/map’;
import ‘rxjs/add/operator/filter’;
names = allUserData
.map(user => user.name)
.filter(name => name);
|
现在这样:
|
1
2
3
4
5
6
|
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。以下是一个使用这些事件启动和停止加载动画的示例：
|
1
2
3
4
5
6
7
8
9
10
11
|
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 会报“未定义的源”错误。
转自 http://ift.tt/2iTxrHL
The post Angular 5.0.0 来啦 appeared first on Linuxeden开源社区.
http://ift.tt/2lQibML
没有评论:
发表评论