Things I learned by upgrading to Angular 6
It’s been a while since Angular6's release and I was so eager to upgrade to enjoy the awesome benefits it provides. This article helps you in a smooth transition to Angular6 while pointing out the issues we encounter during the 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 rules have been changed. Check angular.json wiki for understanding latest configuration details. You have to move your existing configuration in angular-cli.json to new configuration format angular.json.
- 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 Angular CLI
- Use Angular upgrade guide 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 install 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
- 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.
{
"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
}
}
What's been changed in RxJS 6
Operators Name change
do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize
Observable creation methods can be imported form internal package structure ‘rxjs’ directly
import { Observable, Subject, of, from } from 'rxjs';
You are all set. Welcome to Angular 6 :)