Angular 5.0.0 新特性简述 已翻译 100%

我们很高兴地宣布 Angular 5.0.0 版本，pentagonal-donut（五角甜甜圈）。 这是一个包含新功能和错误修正的主版本。此版本继续专注于使 Angular 更小、更快、更易于使用。

以下是在 5.0 版中最大改动的分解。对于全部列表，请参考其 changelog 。

构建优化器

从 5.0.0 开始，使用 CLI 创建的产品级构建现在将默认使用构建优化器。

构建优化器是一个包含在我们 CLI 中的工具，基于你对 Angular 应用程序的语义理解，使你的 bundle 变得更小。

构建优化器有两个主要的工作。首先，我们可以将应用程序的某些部分标记为纯粹的，这样可以改善现有工具提供的树抖动，从而删除应用程序中不是必需的附加部分。

构建优化器所做的第二件事是从应用程序的运行时代码中删除 Angular 修饰器。修饰器是由编译器使用的，在运行时不需要，因此是可以删除的。这些作业中的每一个都会减少 JavaScript 包的大小，并为用户提高应用程序的启动速度。

Angular Universal 的状态转移 API 和 DOM 支持

现在，你可以更轻松地在应用程序的服务器端和客户端版本之间共享应用程序状态。

Angular Universal 是一个专注于帮助开发人员执行Angular应用程序的服务器端渲染（SSR）的项目。通过在服务器上渲染你的Angular应用程序，然后在生成的HTML之上进行引导，你可以添加对不支持JavaScript的 scraper（抓取器） 和 crawler（爬虫） 的支持，并且可以提高感知的应用程序的性能。

在 5.0.0中，团队已经添加 ServerTransferStateModule 和相应的 BrowserTransferStateModule。 此模块允许你在平台服务器上生成信息作为渲染的一部分，然后将其传输到客户端，从而不需要重新生成该信息。这对于你的应用程序通过HTTP获取数据的情况很有用。通过从服务器传输状态，这意味着开发人员不需要在应用程序将其发送到客户端时发出第二个HTTP请求。状态转移的文档在接下来的几周即将发布。

来自 Angular Universal 团队的另一个变化是将 Domino 添加到平台服务器。Domino 意味着我们在服务器端上下文中支持更多的DOM操作，从而改进了对不支持服务器端的第三方JS和组件库的支持。

编译器改进

我们改进了Angular编译器来支持渐进式编译。这提供了更快的重建，特别是对于生产构建和使用AOT构建。我们还为装饰者添加了功能，并通过删除空格来发送更小的捆绑包。

TypeScript转换

在引擎盖下，Angular编译器现在作为TypeScript转换运行，使增量重建速度显着加快。 TypeScript变换是作为TypeScript 2.3的一部分引入的一项新功能，它允许我们挂接到标准的TypeScript编译管道。

您可以通过在的情况下运行ng服务器来利用此功能。

你可以用ng serve打开AOT标志来利用此功能。

ng serve --aot

我们建议大家试试这个。这将成为CLI未来版本的默认设置。有超过一千个组件的项目有一些已知的速度问题。我们希望确保各种规模的项目都能体验到这些改进。


当执行https://angular.io的增量式AOT构建时，新的编译器管道可以节省95％的构建时间（从开发机器上的40秒到不到2秒）。


我们的目标是使AOT编译速度足够快，以便开发人员可以将其用于开发，消除开发人员第一次尝试投入生产时所遇到的差异。该团队已经达到了2秒的增量AOT重建性能目标，并将在未来的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 的值。这使你可以使用修饰器中那些降级表达式的值，它们是仅在运行时计算的。

你现在可以使用 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 {}

国家化的数字、日期和货币管道

我们已经建立了新的数字、日期和货币管道，以增加了跨浏览器的标准化，并消除了对国际化的 polyfills 。

在 Angular 中，我们依赖于浏览器，通过使用浏览器的 i18n API 来格式化数字、日期和货币格式。这导致了大多数开发人员需要使用 polyfill ，意味着用户在浏览器中看到的结果是不一致的，并且我们收到了常用格式（如货币管道）在开箱之后不符合开发者的预期的评论。

在5.0.0版本中，我们更新了管道以使用我们自身的实现，依靠 CLDR 为你想要支持的任何语言环境提供大量的语言环境支持和配置。我们已经制作了一个关于 v4 和 v5 版本之间管道行为差异的文档。

如果您尚未准备好新的管道，则可以导入 DeprecatedI18NPipesModule 以访问旧的行为。

在 changelog 中了解更多关于 i18n 管道的改动

用 StaticInjector 替换 ReflectiveInjector 

为了移除更多的 polyfill ，我们用 StaticInjector 替换了 ReflectiveInjector 。这种 Injector 不再需要反射的 polyfill ，从而减少了大多数开发人员的应用程序大小。

之前版本

ReflectiveInjector.resolveAndCreate(providers);

现在版本

Injector.create(providers);

Zone 速度改进

默认情况下，我们已经使 zone 执行更快，而且对于关注性能的应用程序，我们已经可以完全绕过 zone 了。

要绕过 zone ，请使用 'noop' 作为你的 ngZone 来引导你的应用程序。

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

关于完整的示例，可以参照 ng-component-state 示例工程。

exportAs

我们已经添加了对组件/指令的多名称的支持。这对于帮助用户在不中断更改的情况下迁移非常有用。通过导出多名称的指令，您可以在Angular microsyntax中创建新的名称，而不会破坏现有的代码。这已经在其前缀迁移中用作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

在4.3版本中，我们以@angular/common的形式发布了HttpClient，这是一个更小，更简单，更强大的在Angular中进行Web请求的方式。新的HttpClient得到了开发人员的一些好评，所以我们现在推荐HttpClient用于所有的应用程序，并且弃用以前的@angular/http库。


要更新到HttpClient，需要在每个模块中使用@angular/common/http中的HttpClientModule替换HttpModule，注入HttpClient服务，并删除任何map(res => res.json())调用。

CLI v1.5

从Angular CLI v1.5开始，我们增加了对Angular v5.0.0的支持，默认会生成v5项目。

有了这个小版本，我们默认打开了构建优化器，所以开发人员可以从更小的包中受益。

我们也更新了我们使用tsconfig.json文件，更严格地遵循TypeScript标准的方式。以前，如果我们检测到延迟加载的路由，并且手动指定了files列表或include在您的tsconfig.json,中，我们将自动添加这些路由，但是现在我们遵循TypeScript规范，不再执行此操作。默认情况下，CLI 配置没有files或include部分的TypeScript，因此大多数开发人员不会受此影响。

Angular Forms 中的 Blur/Submit 新增更新

现在，你可以在 “blur” 或 “submit” 上运行验证和值更新了，而不用在每个输入事件上运行验证和值更新。
表单是许多应用程序中非常重要的一部分，如果你有任何类型的服务器端验证，或者一些由你希望尽可能少执行的验证或值更改所触发的任何重量级的流程，那么你现在可以在控制层计时来控制验证和值的更改，或将其指定为整个表格。

另外，你现在可以直接在 options 对象中指定 `asyncValidators` ，而不是将它指定为第三个参数。

模板驱动的表格（Forms）

之前版本

<input name="firstName" ngModel>

现在版本

<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">

或

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

Reactive Forms 响应式表格

之前版本

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

现在版本

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

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