What's new in Angular 5

Angular 5.0 is a new version of a recognized web framework developed and maintained by Google. The focus of this release to make Angular smaller, faster and easier to use.

In this post we're going to have a quick overview of the new features brought by the new Angular. Full change log is available here.

Http service is deprecated

Old Http service provided by @angular/http is now replaced by the new HttpClient available from @angular/common/http package introduced in Angular 4.3. Many changes include:

• JSON is now considered default and longer needs to be parsed (by .map((value) => value.json())).
• Interceptors were returned from AngularJs to allow injecting middleware logic into the pipeline
• New progress events for uploading and downloading

To start using new HttpClient:

• Change import { Http } from "@angular/http"; to import { HttpClient } from "@angular/common/http"; in every component.
• Replace import { HttpModule } from '@angular/http'; with import { HttpClientModule } from "@angular/common/http"; in every module.
• Remove any .map((value) => value.json()) calls.

New router lifecycle events

A long-awaited update to router allows developers to track router lifecycle more thoroughly by including events from router guards.

The new events are: GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd.

Usage example:

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);
      }
    });
  }
}

Form changes

Another important change is regarding form control updates, which gives us more control over user input updates. It allows developers to update and validate values only on blur and submit events instead of doing that on every input event. This is especially useful when doing async validation.

Usage example:

Reactive Forms

private exampleInput = new FormControl('', {updateOn: 'blur', asyncValidators: [myValidator]})

Template-Driven Forms

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

RxJs 5.5

Angular now uses RxJs 5.5 which somewhat changes the way we use it. First and foremost, all operators are now to be included from rxjs/operators instead of rxjs/operator/operator_name.

Before:

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/mergeMap';

After:

import { filter, mergeMap } from 'rxjs/add/operator';

Secondly, it's now required to use pipe operator in order to use said operators:

Before:

exampleObservable
  .filter(x => x % 2 === 0);
  .map(x => x + x);

After:

exampleObservable.pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
);

You can read about these changes here.

Multiple export alias

Every directive in Angular 5 now can be exported with multiple names to be used as a variable in a template. This can be used for helping your users to migrate to new versions without breaking changes. For example, this has been used as a part of the Angular Material project in its prefix migration, and can help other component authors as well.

Directive declaration:

@Directive({
 selector: '[tooltip]',
 exportAs: 'tooltip popup'
})

Usage in template:

<a tooltip="I'm a tooltip!!" #tooltip="popup">I'm a link</a>
<button (click)="popup.toggleTooltip()">Toggle tooltip</button>

Preserve white space

Before Angular 5, all whitespace in templates was preserved and served inside builds. Now developers can choose whether they want to save whitespace or not. This can have a big impact on the build size but can affect the DOM. There are two ways to enable this function

In component declaration:

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

Globally in tsconfig.json:

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

Build Optimization

In Angular 5, builds created with the Angular CLI will now use the build optimizer. The build optimizer removes Angular decorators from your app's runtime codes thereby reducing the size of your bundle and increasing the boot speed of your application. In addition, the build optimizer removes part of your application that is not needed during runtime via tree-shaking. This action leads to a decreased bundle size, and faster application speed.

Support for JavaScript Service Workers

Angular 5 enables better service workers support by including @angular/service-worker package, which was previously maintained at https://github.com/angular/mobile-toolkit. This package, however, was rewritten to support use-cases across a much wider variety of applications.

How to update?

After all, Angular 5 has a lot of small changes and many APIs removed and/or made obsolete, so Angular team has made a handy tool which covers all the modifications your application needs to undergo before and after updating to Angular 5.