Angular 5 (Upgrade Your Project From an Older Version to Angular 5)

Hey coders, if you are still working on angular 2, 4 then it is the time to upgrade your application to angular 5. Angular 5 (also called Pentagonal-donut) has a lot of new features better performance, small bundling.

If you want to update your old angular 2 application to angular 5, then this tutorial is for you.

Upgrading from angular 2, 4 to angular 5 is not too hard task because there are very few breaking changes. The Angular team has also put a handy tool to make upgrading from any version to angular 5, as simple as possible.

Here are the few points to keep in mind when upgrading your application:

Rename your project’s all tags to tags as the element has been deprecated since v4.

You will have to upgrade all of your angular packages to version 5.0, run the following command:

$ npm install @angular/animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,[email protected]

# or, using Yarn:

$ yarn add @angular/animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,[email protected]

Angular 5 now also depends on TypeScript 2.4.2 and RxJS 5.5.2, so you’ll have to upgrade those package as well.

npm install <a href=”mailto:[email protected]″>[email protected]</a> –save-exact

If you rely on the date, currency, decimal, or percent pipes, in 5 you will see minor changes to the format. For applications using locales other than en-us you will need to import it and optionally locale_extended_fr from @angular/common/i18n_data/locale_fr and registerLocaleData(local). For more information on pipes breaking changes: stackoverflow.com/a/47263949/2810015

Use of implements instead of extends with any lifecycle events: Ensure you don’t use extends OnInit, or use extends to any lifecycle event. Instead, use implements.

Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don’t need to map to json anymore and remove any map(res => res.json()) calls, which are no longer needed.) and now supports typed return values and interceptors.

Here’s a quick example of the old syntax:

import Component, OnInit from ‘@angular/core’;

import Observable from ‘rxjs/Observable’;

import ‘rxjs/add/observable/of’;

import ‘rxjs/add/operator/map’;

import ‘rxjs/add/operator/filter’;

import ‘rxjs/add/operator/do’;

@Component(… )

export class AppComponent extends OnInit

myObs = Observable.of(‘Hello’, ‘Alligator’, ‘World!’);

ngOnInit()

this.myObs

.do(x => console.log(‘The do operator is the do operator!’))

.filter(x => x.length > 8)

.map(x => x.toUpperCase())

.subscribe(x => console.log(x));

… and the same example with the new lettable operator syntax becomes:

import of from ‘rxjs/observable/of’;

import map, filter, tap from ‘rxjs/operators’;

@Component(… )

export class AppComponent implements OnInit

myObs = of(‘Hello’, ‘Alligator’, ‘World!’);

ngOnInit()

this.myObs

.pipe(

tap(x => console.log(‘The do operator is now tap!’)),

filter(x => x.length > 8),

map(x => x.toUpperCase())

)

.subscribe(x => console.log(x));