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