HOME
PRIVACY POLICY
ABOUT US

Upgrade from angular 5 to angular 6 and RxJS 6 Changes you have to do

This blog demonstrate how to upgrade your previous angular 5 project to angular 6. Angular 6 is out with all new functionalities and breaking changes which changes way of programming in angular .It is Shipped with Angular 6 cli . From angular 6 you can create your own dashboard just from angular cli single command . to update from angular 5 to angular 6 . Full Update guides is given at https://update.angular.io . I have update my angular 5 app to angular 6 by following instruction . Difficulties i felt in upgrading from angular 5 to 6 makes me to write this blog . Lets follow steps and see difficulties which you also faces while upgrading . We will follow instruction mention at https://update.angular.io .



  1. Make sure you are using Node 8 or later . Kindly go to nodejs terminal and type node --version to check version . To update nodejs version kindly go there official website and download latest version
  2. Update from local and global angular CLI and Migrate configuration to angular.json from angular-cli.json
			npm install -g @angular/cli

Above Commad is used to install angular cli 6 globally .


			npm install @angular/cli

this command is basically used for updating . When i executed this command i update my angular cli from 1.7.3 to 1.7.4 but it not update to 6.0.0 . So i used following commands to update


            npm install --save  @angular/cli@latest
            ng update @angular/cli

Last Command is used to migrate all your configuration from angular-cli,json to angular.json


          ng update @angular/core

Now Update all of your Angular framework packages to v6, and the correct version of RxJS and TypeScript. By above commands but as i executed above command i got follow error


  Package "@angular/flex-layout" has an incompatible peer dependency to "rxjs" (requires "^5.5.0", would install "6.2.0").
Incompatible peer dependencies found. See above.

Above error basically shows that i have incompatible peer dependency so i used following commands to install dependency for angular cdk , angular material , rxjs 6


      npm i @angular/cdk@6 @angular/compiler-cli@6 @angular/material@6 rxjs@6 --save

Now use


  ng update @angular/core
  ng update @angular/material

To update all your frameworks and angular material frameworks if you are using it


   npm install --save  rxjs-tslint
   rxjs-5-to-6-migrate -p src/tsconfig.app.json
   npm install --save rxjs-compat

Use this all above commands for final update and make rxjs 6 backward compatible by last command . So that you will able to use all third party libraries in your angular 6 .

Now you can use

  ng serve --open


With the release of version 6, RxJS changed its internal package structure. It did so to ensure that less code needs to be imported and that produced app bundles therefore are smaller. So this definitely is a good change.

Import Part Previously

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { of } from 'rxjs/observable/of';


Now it Becomes

import { Observable, Subject } from 'rxjs';
import { map, take } from 'rxjs/operators';
import { of } from 'rxjs';

New Operator is introduced in rxjs 6 pipe which takes infinite arguments as operator which will be executed from left to right order


import { map, switchMap, throttle } from 'rxjs/operators';

myObservable
  .pipe(map(...), switchMap(...), throttle(...))
  .subscribe(...);


Renamed Operators


catch() => catchError()
do() => tap()
finally() => finalize()
switch() => switchAll()
throw() => throwError()
fromPromise() => from()

Conclusion

In this blog we have see how to upgrade from angular 5 to angular 6 using steps given by update.angular,io with all difficulties you may in upgrading . And Changes which you to do to your code in RXJS to make it work in angular 6 rxjs 6 framework



Taher Software Engineer

Related Posts