Angular 2 to 6 migration
The migration actually is pretty straightforward. Just dump the old app folder into a new Angular CLI generated project’s src/app, and run it.
Ha, just kidding. However, it’s not that far from truth. Here are the steps:
- As usual, update Node & npm.
- I think it’s better to just install a brand new Angular instead of updating your version 2, if you’re not that closely following all the updates.
- If you have older Angular CLI: angular-cli. Uninstall and use the new one: @angular/cli
- Use the new Angular CLI to generate a brand new project, to avoid configuration hell.
- Yes, do dump the old app folder into the new one.
- Run it with the new command: ng serve –open
- Watch it blows up.
- Check the compiler errors:
These are the problems we need to deal with. Let’s go thought mine. Yours must be different, but you sure will get a hint of them after reading this.
- Cannot find module ‘angular2-fontawesome’ & ‘angular2-infinite-scroll’: Update the plugins/modules.
- Cannot find name ‘require’:
It used to be like this:
In Angular 6:
Remove it. It should go away.
- Property ‘switchMap’, ‘toPromise’ & ‘Subject’ does not exist in Observable: RxJs 6 changed importing syntax, package structure and method chaining(now all in a pipe() function). Lucky there’s a backward compatible module:
npm install --save rxjs-compat. However, it’s best to change all your RxJs code to the newest format in order to benefit from the reducing code size benefit of RxJs 6.
- Root component now is named: app-root
After all that, your angular 2 app should be running fine with Angular 6. Just one command
ng build --prod to make a production build is surely a very nice improvement. Time to do the actual work! Happy coding.