Migrating your app to Angular 6

by

Hi Friends,

In this section, we are going to talk about migrating your app to angular 6. Again, there may be extra separate steps while upgrading depending on current stack of angular. Say if you are using systemjs and gulp in your project, then migration would be little different than the usual one. For later approach, I will talk in different post. In this post, let’s start with normal flow.

Here is the sample project which you can create with angular 5.* version.

Now, this is the most common template backed by webpack. Let’s inspect the versions we have locally.

Now, let’s see how to upgrade the same. Best part to get started is from here https://update.angular.io/. If you like to understand what are the features included as part of angular 6 release, then you can refer stephen fluin blog https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4. I have also tweeted features in a nutshell!

Now, lets start migrating! First install angular 6 using npm install -g @angular/cli. Upon successful installation, it will give confirmation like shown below. Now, let’s go to app which was created using angular 5 and run the following commands. But, before that let’s see the package.json.

Let’s run ng update @angular/cli locally in project. This will scan your package.json and update the project accordingly.

Now, let’s compare package.json, it will come like this.

But at this moment, when I will do ng build, it will flag following error.

And the reason for this is, CLI couldn’t find angular.json file. Now, angular 6 and above will have angular.json instead of .angular-cli.json file. This is strange though that ng update command doesn’t replace .angular-cli file with new file. Maybe in future that will be there. But, the easiest way is; create a separate app with angular 6 now and then copy angular.json file from that project to this project and make necessary changes like shown below.

Now, I copied this file to my existing repo and there just replaced project name test1 to sample everywhere. After that, I have also deleted the .angular-cli.json file. Here is the sample angular.json file.

Let’s build the project again. Now, it gives the following error. It basically says that devkit is missing. we can install it using npm i @angular-devkit/build-angular –save-dev. Now, if I try to build, it will build successfully. When I do ng serve now, it will run successfully.

For your sandbox experiments around angular 6, you can also try https://stackblitz.com/. I have already talked about stackblitz in my previous post.

I hope you would have liked today’s discussion around migrating your angular apps. We will delve deeper around these areas in coming posts.

For quick updates,

Thanks,
Rahul Sahay
Happy Coding

Thanks, Rahul Happy Coding