我们很高兴地宣布 Angular 五边形甜甜圈版本 5.0.0。这是一个主要版本，包含新功能和错误修复。此版本继续我们致力于使 Angular 更小、更快、更易于使用。

以下是 v5 中一些最大变化的详细说明。有关完整列表，请参阅变更日志。

构建优化器

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

构建优化器是我们 CLI 中包含的一个工具，可利用我们对 Angular 应用程序的语义理解来缩小您的捆绑包。

构建优化器有两个主要工作。首先，我们能够将应用程序的某些部分标记为pure ，这改进了现有工具提供的树摇动，删除了应用程序中不需要的其他部分。

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

Angular 通用状态传输 API 和 DOM 支持

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

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

在5.0.0中，团队添加了ServerTransferStateModule和相应的BrowserTransferStateModule 。该模块允许您在平台服务器渲染过程中生成信息，然后将其传输到客户端，这样就不需要重新生成该信息。这对于应用程序通过 HTTP 获取数据等情况很有用。通过从服务器传输状态，这意味着应用程序向客户端发出第二个 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 秒增量 AOT 重建性能目标，并将在未来版本的 CLI 中默认打开 AOT。

作为转换转换的一部分，我们不再需要genDir ，并且outDir已经更改：我们现在总是为 node_modules 中的包发出生成的文件。

保留空白

从历史上看，模板中的制表符、换行符和空格已被编译器忠实地重新创建并包含在您的构建中。您现在可以选择是否保留来自组件和应用程序的空白。

您可以将其指定为每个组件装饰器的一部分，当前默认为true 。

@Component({
  templateUrl: 'about.component.html',
  preserveWhitespaces: false
}
export class AboutComponent {}

或者您可以在 tsconfig.json 中在应用程序范围内指定它，目前它也默认为true 。

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

一般来说，组件级规范优先于应用程序级规范。未来团队希望默认为false为开发者节省默认空间。不用担心您的<pre>标签，这些标签会被智能处理。

在我们的文档网站上阅读有关“preserveWhitespaces”的更多信息。

改进的装饰器支持

我们现在支持 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 {}

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

我们构建了新的数字、日期和货币管道，以提高跨浏览器的标准化并消除对 i18n 填充的需要。

在 Angular 中，我们依赖浏览器使用浏览器 i18n API 提供数字、日期和货币格式。这导致大多数开发人员需要填充，意味着用户在浏览器中看到不一致的结果，并且我们收到的评论称通用格式（例如货币管道）与开发人员开箱即用的期望不符。

在 5.0.0 中，我们更新了管道以使用我们自己的实现，依靠CLDR为您想要支持的任何区域设置提供广泛的区域设置支持和配置。我们制作了一份文档来比较 v4 和 v5 之间的管道行为。

如果您还没有准备好使用新管道，则可以导入DeprecatedI18NPipesModule来访问旧行为。

将 ReflectiveInjector 替换为 StaticInjector

为了删除更多的 polyfill，我们用 StaticInjector 替换了 ReflectiveInjector。该注入器不再需要 Reflect polyfill，从而减少了大多数开发人员的应用程序大小。

// 以前
ReflectiveInjector.resolveAndCreate(providers);
// 现在
Injector.create(providers);

区域速度改进

默认情况下，我们使区域速度更快，并且对于注重性能的应用程序，我们可以完全绕过区域。

要绕过区域，请使用“noop”作为 ngZone 来引导您的应用程序。

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

有关完整示例，请查看示例 ng-component-state 项目。

出口（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 

在 4.3 版本中，我们在@angular/common中提供了 HttpClient，作为在 Angular 中发出 Web 请求的更小、更简单、更强大的方式。新的 HttpClient 得到了开发人员的高度赞扬，因此我们现在推荐所有应用程序使用 HttpClient，并弃用以前的@angular/http library 。

要更新到 HttpClient，您需要在每个模块中将HttpModule替换为@angular/common/http中的HttpClientModule ，注入 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 配置 TypeScript 时不包含files或include部分，因此大多数开发人员不会受此影响。

Angular Forms 添加 updateOn Blur / Submit

您现在可以在“blur”或“submit”上运行验证和值更新，而不是在每个输入事件上运行。

表单是许多应用程序中非常重要的一部分，如果您有任何类型的服务器端验证，或者由您希望减少运行频率的验证或值更改触发的任何较繁重的流程，您现在可以控制验证和值更改在控制级别计时，或为整个表单指定它。

此外，您现在可以直接在选项对象中指定“asyncValidators”，而不是将其指定为第三个参数。

// 以前
<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]})

RxJS 5.5

我们已将 RxJS 的使用更新到 5.5.2 或更高版本。最近发布的 RxJS 完全使开发人员能够通过一种称为“可出租运算符”的新使用 RxJS 的方式来避免以前导入机制的副作用。这些新的运算符消除了以前导入运算符的“补丁”方法中存在的副作用和代码分割/树抖动问题。

// 以前
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 模块分发版本。新的 Angular CLI 将默认引入该版本，从而大大节省包大小。但如果您不使用 Angular CLI，您仍然应该指向新发行版。文档可以在可出租运营商文档的构建和 Treeshaking部分找到。

新路由器生命周期事件

我们向路由器添加了新的生命周期事件，允许开发人员跟踪路由器从运行防护开始到激活完成的周期。这些事件可用于诸如在孩子更新时在特定路由器出口上显示旋转器或测量防护程序和/或解析器的性能之类的事情。

新事件（按顺序）为GuardsCheckStart 、 ChildActivationStart 、 ActivationStart 、 GuardsCheckEnd 、 ResolveStart 、 ResolveEnd 、 ActivationEnd 、 ChildActivationEnd 。使用这些事件启动/停止微调器的示例可能如下所示：

// router-lifecyle.ts
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 更新指南，以帮助指导您完成整个过程，并了解您在开始更新过程之前想要在代码中进行的任何更改、更新应用程序的步骤以及为未来版本做准备的信息。有角。

我们删除了许多以前弃用的 API（例如OpaqueToken ）并发布了一些新的弃用内容。本指南将引导您完成需要对应用程序进行的更改。

已知问题

生产构建源映射存在已知问题。某些源映射可能会导致未定义的错误源。https://github.com/angular/angular/issues/19840

文章来源：https://blog.angular.dev/version-5-0-0-of-angular-now-available-37e414935ced

这是历史文件的翻译，当个参考。