SATURN  RING  STATION

At a distant space view post, we chat about codes.

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:

  1. As usual, update Node & npm.
  2. 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.
  3. If you have older Angular CLI: angular-cli. Uninstall and use the new one: @angular/cli
  4. Use the new Angular CLI to generate a brand new project, to avoid configuration hell.
  5. Yes, do dump the old app folder into the new one.
  6. Run it with the new command: ng serve –open
  7. Watch it blows up.
  8. 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.

 

  1. Cannot find module ‘angular2-fontawesome’ & ‘angular2-infinite-scroll’: Update the plugins/modules.
  2. Cannot find name ‘require’:

It used to be like this:

In Angular 6:

Remove it. It should go away.

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

 

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

 

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Angular 2 to 6 migration