Does ng update work in the real world?

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 clonenpm installng 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.

2 thoughts on “Does ng update work in the real world?

  • I’ve found that the main thing that trips you up when doing this, are, as you mentioned, the change to angular-cli,json and the need to ‘manually’ update the cli via NPM. I do thing that ng update is a great addition to the CLI, especially for keeping apps more secure and for those who are new to Angular and using NPM.

Leave a Reply

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