Angular 5

Angular 5 has been released on November, 1 2017. Let’s take a look on 5 most interested new features of popular SPA framework.

1. Angular Universal support

Angular Universal is a project that allows server-side rendering for Angular apps. In pre-5.0 releases of Angular support of server-side rendering was not smooth enough. Now Angular 5 has ServerTransferStateModule and corresponding BrowserTransferStateModule that allows to transfer state between client and server smoothly. Also Angular 5 has support for Domino - server-side DOM implementation. See this presentation on Angular Universal. Here is Angular Universal Demo.

2. Ahead-of-Time Compilation: 95% increase in compilation speed

Now Angular supports Ahead-of-Time Compilation (AOT Compilation) based on TypeScript transform compilation that was introduced in TypeScript 2.3 and allows to greatly increase re-compilation speed during development, up to 95%. If you have large project with multiple components, your compilation speed may decrease from dozens of seconds to just few seconds. This feature is activated with a parameter --aot:

ng serve --aot

See video from Angular Connect were Tobias Bosch explains AOT compilation.

3. New Internationalized Number, Date, and Currency Pipes

Previous versions of Angular relied on browsers to provide number, date and currency formatting. But browsers provide inconsistent results in this area. So now Angular has its own implementation of i18n support. See details in the changelog.

4. Angular CLI 1.5

Synchronously with major release of Angular new version of Angular CLI that creates projects in Angular 5 also has been published. Important change in Angular CLI 1.5 is build optimizer turned on by default and there is no need to turn it on manually when you build a project for production.

5. RxJS 5.5

Now Angular 5 out-of-the box supports latest release of RxJS library that implements widely used in Angular Observable and operators. Now syntax of using RxJS becomes simpler. Instead of writing:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);

You can write:

import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
  map(user => user.name),
  filter(name => name),
);

See full description of new features on Angular Blog