Things I learned by upgrading to Angular 6
Published in
2 min readJun 1, 2018
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.
- 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
}
}
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:
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 :)
Connect with me on LinkedIn. Happy Coding!