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.

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

 

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