What’s New In Angular 5?

Angular 5 was officially announced on 1st November 2017 and succeeded Angular v4.4.0. This release of Angular 5 focused on reducing the size of Angular apps to make them faster.

Below are the major changes and features introduced in Angular 5.

Http Deprecated and replaced by HttpClient

Since the release of Angular 2, the @angular/http module was used for making HTTP requests in Angular applications. Then, in Angular 4.3 the HttpClient API from @angular/common/http was introduced with several features. From Angular 5 onwards, the @angular/common/http package is now recommended for use in all apps.

The HttpClient API (from @angular/common/http) includes:

  • Support for JSON body types with typed, synchronous response body access
  • JSON is an assumed default and no longer needs to be explicitly parsed
  • Progress events for both request upload and response download via Observables
  • Interceptors allow middleware logic
  • Immutable request and response objects

You can start using the HttpClient module by importing the following:

import { HttpClientModule } from '@angular/common/http';

And in your constructor:

constructor (private http: HttpClient) {}

Read more about the HttpClientModule here.

Support for multiple class export alias

In Angular 5 you can now export components and directives with multiple names. Exporting a component with multiple names can help you achieve more readable code and help users migrate without breaking changes.

Example:

import { Component } from '@angular/core';

@Component({
   selector: 'hello-component',
   templateUrl: '<p>Hello world!</p>',
   exportAs: 'PrimaryComponent, TechnouzComponent'
})
export class HelloComponent {}

This component can then be imported as HelloComponent, PrimaryComponent or TechnouzComponent. Particularly useful when Route Guards are declared as services!

Internationalisation for pipes

Angular 5 includes new currency, number and date pipes that increase standardisation across browsers and drop the need for i18n polyfills. To use the old pipes, the DeprecatedI18NPipesModule needs to be imported after the CommonModule in your @NgModule decorator.

Improved decorator support

Angular 5 ships with support for lambdas in decorators.

Before Angular 5:

@Component({
   provider: [{provide: 'token', useValue: calculated()}]
})
export class HelloComponent {}

In Angular 5:

@Component({
   provider:[{provide: 'token', useFactory: () => null}]
})
export class HelloComponent {}

Build optimisation

The Angular team have really been focusing on this for the Angular 5 release. In Angular 5 production builds create with the Angular CLI will now apply to the build optimizer by default. The Build optimizer removes Angular decorators from your app’s runtime code and therefore reduces the size of your bundle. As a result, your app will bootstrap faster.

The build optimizer can now intelligently use a technique called Tree Shaking to remove unnecessary packages and imports to further reduce the final bundle size. This means unused imports in class files will automatically be removed at compile-time.

Faster compiler

A lot of thought has gone in to making the Angular compiler faster for this release. The Angular CLI v1.5 which was released alongside Angular 5 now leverages TypeScript transformations. Developers can take advantage of this by running:

ng serve --aot

Forms validation in Angular 5

In Angular 5, forms have the ability to decide when the validity and value of a field is updated. For example:

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

In the case of reactive forms:

this.myForm = this.formBuilder.group({
   name: ['John', {updateOn: 'blur', validators: [Validators.required]}]
})

Animations

Angular 5 has two new transition aliases: :increment and :decrement.

Animation queries now also support negative limits, in which case elements are matched from the end and not the beginning.

NgFor deprecated

NgFor has been removed after it had been deprecated since Angular v4.0. Applications should now use NgForOf instead, however this does not impact the use of *ngFor in template files.

New router lifecycle events

New lifecycle events have been added to the Angular Router. These include: GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd and ChildActivationEnd.

Furthermore, you can now configure the router to reload a page if it receives a request to re-navigate to the same URL:

providers: [
   RouterModule.forRoot(routers, {onSameUrlNavigation: 'reload'})
]

How to upgrade to Angular 5

The Angular team have built a tool which provides walk-through steps on how to upgrade. You can find out more here.

Share on Facebook1Tweet about this on TwitterShare on Google+0Share on Reddit0Share on LinkedIn0Email this to someone

Subscribe to Email Updates