I have written before about the sorry state of Angular on GitHub: 60% of Angular projects on GitHub are still using Angular v2. But why is this? Does ng update work in the real world?

 

The Angular team try to make updating as simple as possible. They even provide a tool to automate the process: ng update. But does it work? Let’s find out.

 

 

Trello Clone

I picked Trello Clone. It is a simple open source project on GitHub, You can see a demo here and the source code is available here.

Trello Clone is an Angular 2.3.1 project. I wanted to upgrade it to Angular 6.1.0.

I started by forking the repository, running git clone and installing all the packages (npm install). I tested the project by running ng serve.

 

 

First Attempt

To upgrade the project I ran ng update. I was expecting ng update to show me a list of projects that would require an update but it didn’t. Instead, it proceeded to upgrade the project automatically.

The update finished successfully after some churning.

.

 

Unfortunately, when I ran ng serve the update had not worked. An error appeared telling me the angular-cli.json file had not been migrated:

Local workspace file (‘angular.json’) could not be found.

 

 

Second Attempt

I started again (git clone, npm install, ng serve).

This time I ran the upgrade manually.

First, I updated the Angular CLI by running: npm install @angular/cli@latest –save-dev

Next, I migrated the Angular CLI by running: ng update @angular/cli

Then I updated Angular itself by running: ng update @angular/core. This failed because the version of codelyzer was incompatible:

Package “codelyzer” has an incompatible peer dependency to “@angular/core” (requires “^2.3.1 || >=4.0.0-beta <5.0.0” (extended), would install “6.1.2”)

 

I fixed this error by updating codelyzer manually. Like this: npm install codelyzer@latest –save-dev

I re-ran ng update @angular/core and it finished successfully.

ng serve proved the update had worked. You can see updated source code here.

 

 

Conclusion

It is possible to update older Angular projects but you have to know what you are doing. The Angular CLI makes updating quick but not automatic. My second attempt to update Trello Clone took about 15 minutes from start to end.