Angular 5.0 来了! 有这些大变化

我们很高兴地宣布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就可以利用上述机制。

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

在执行

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

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

保留空白

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

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

rush:js;"> @Component({ templateUrl: 'about.component.html',preserveWhitespaces: false } export class AboutComponent {}

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

rush:js;"> { "extends": "../tsconfig.json","compilerOptions": { "outDir": "../out-tsc/app","baseUrl": "./","module": "es2015","types": [] },"angularCompilerOptions": { "preserveWhitespaces": false },"exclude": [ "test.ts","**/*.spec.ts" ] }

一般规则是组件级配置要覆盖应用级配置。开发团队打算将来把默认值改成false，默认为开发者节省空间。不要担心你的

标签，编译器会智能处理它们。

改进的装饰器支持

现在支持Lambda和对象字面量useValue、useFactory和data装饰器中的表达式降级（expression lowering）。这样可以使用只能在运行时计算的装饰器中被降级（lower）的值。
因此现在可以不使用命名函数，而改用Lambda函数。换句话说，执行代码不会影响你的d.ts或你的外部API。
 null}]
})
export class MyClass {}