Things I learned by upgrading to Angular 6

It’s been a while since Angular 6 has been released and I was so eager to upgrade to enjoy the awesome benefits it provides. This article shows issues we encounter during upgrade and how to resolve them.

Photo by Lyndsey Marie on Unsplash

1. Update your node version to 8 or above and Install Angular cli latest globally by npm i -g @angular/cli@latest
2. 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.
3. 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
4. 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.
5. 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
6. 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
  }
}

7.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:

1. do -> tap
2. catch -> catchError
3. switch -> switchAll
4. 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 :)

Connect with me on LinkedIn. Happy Coding!