Want to upgrade project from Angular v5 to Angular

Question

As Angular 6 is here, I want to upgrade or move my angular 5 client application to angular 6, but I'm not getting any tutorial or anything which can guide me through.

According to me I just need to run a new Angular CLI and then have to move my older source to new project. I read the Angular 6 is using a new renderer called Ivy. Will I have to change my project according to Ivy?

Answer 1

Check the step by step upgrade details from Angular 5 to Angular 6. These provides details on issues you encounter during upgrade and how to resolve them.

• Update your node version to 8 or above and Install Angular cli latest globally by npm i -g @angular/cli@latest.
• Angular 6 uses angular.json as configuration file instead of .anguar-cli.json. Also tslint has been changed. Check https://github.com/angular/angular-cli/wiki/angular-workspace for latest configuration details. You have to move any of your existing configuration to new configuration file.
• To do this create another dummy project with latest cli using ng new ‘your-project’ and same defaults such as prefix, style etc you used earlier for your project. Create new project with cli https://github.com/angular/angular-cli/wiki/new
• Use https://update.angular.io/ to check what has been changed from your current version of Angular → Angular 6. It provides usage of how to change/fix them.
• Follow the steps above and copy/update the angular.json file created in step2. Do npm i in your project to get all dependencies and do npm update
• Now comes the big part. RxJS upgrade and resolving conflicts. RxJS has standardised imports of operators and Observable creators with this release. Do npm i -g rxjs-tslint and add below lint configuration in tslint.json

{
  "rulesDirectory": [
    "node_modules/rxjs-tslint"
  ],
  "rules": {
    "rxjs-collapse-imports": true,
    "rxjs-pipeable-operators-only": true,
    "rxjs-no-static-observable-methods": true,
    "rxjs-proper-imports": true
  }
}

• Now run ng lint --fix. This fixes few items but most of the remaining issues will be highlighted and you have to fix it manually.

Operators Name change:

do -> tap, 
catch -> catchError, 
switch -> switchAll, 
finally -> finalize

All operators moved to rxjs/operators

import { map, filter, reduce } from 'rxjs/operators';

Observable creation methods are moved to rxjs

   import { Observable, Subject, of, from } from 'rxjs'; 

You are all set. Welcome to Angular 6 :) Check my blog post here on how to upgrade

Answer 2

There are few steps to upgrade 2/4/5 to Angular 6.

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

To fix the issue related to "angular.json" :-

ng update @angular/cli --migrate-only --from=1.7.4

Store MIGRATION
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

RXJS MIGRATION
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Hoping this will help you :)

Answer 3

Complete guide

-----------------With angular-cli--------------------------

1. Update CLI globally and locally

1. Using NPM ( make sure that you have node version 8+ )

   npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save

2. Using Yarn

   yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2.Update dependencies

ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs

Angular 6 now depends on TypeScript 2.7 and RxJS 6

Normally that would mean that you have to update your code everywhere RxJS imports and operators are used, but thankfully there’s a package that takes care of most of the heavy lifting:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

Then you can run rxjs-5-to-6-migrate

rxjs-5-to-6-migrate -p src/tsconfig.app.json

finally remove rxjs-compat

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

---

Refer to this link https://alligator.io/angular/angular-6/

---

-------------------Without angular-cli-------------------------

So you have to manually update your package.json file.

Then run

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

Answer 4

Just use the official upgrade guide which will tell you what you need to do for your own particular needs:

https://update.angular.io/

Answer 5

Please run the below comments to update to Angular 6 from Angular 5

1. ng update @angular/cli
2. ng update @angular/core
3. npm install rxjs-compat (In order to support older version rxjs 5.6 )
4. npm install -g rxjs-tslint (To change from rxjs 5 to rxjs 6 format in code. Install globally then only will work)
5. rxjs-5-to-6-migrate -p src/tsconfig.app.json (After installing we have to change it in our source code to rxjs6 format)
6. npm uninstall rxjs-compat (Remove this finally)

Answer 6

simply run the following command:

ng update

note: this will not update globally.