Coding Required

7 Years of Angular Updates

2023-08-314 min read

When we first started YoPrint, we were on Angular 4. After just 7 years, we made it all the way to Angular 15. It was quite the rollercoaster.

Upgrade Manual Provided

To upgrade your Angular project, you need to visit update.angular.io, key in your current version and your target version, and Angular will provide you with step-by-step instructions on how to upgrade. This was part of the reason we chose Angular since they provide a detailed upgrade manual.

Ng Update

Angular CLI comes with ng updatecommand that can automatically modify your code to account for breaking changes. All you need to do is review and commit. Pretty neat, right? Except, it doesn’t always work, and when it fails, it doesn’t always tell you why.

So I went back in time when our project was in Angular 5.2 and tried to upgrade it to Angular 6.2 with the instructions provided. I also switched to Node 8.9, which was the supported Node version for Angular 6.

I ran into the following error that indicates I have a malformed JSON file and it doesn’t tell me which one was it.

After struggling for two hours or so and several StackOverflows later, I found the correct solution. It turns out it had nothing to do with a malformed JSON file.

Enter Nx

Around Angular 7, we added Nx to our project. Nx allowed us to break our app into libraries and manage it all in monorepo. This was before Angular added the ability to add libraries natively.

Nx was created to provide a better developer experience for the Angular community and developers in other communities who are trying to navigate increasingly large and complex development environments. As the Angular landscape has evolved, we have worked hard to ensure that Nx stays one step ahead.

Victor Savkin — Creator of Nx

Nx also removed the need to read update.angular.io and added a few more migrations of their own to work around some ng update quirks, and overall improved Angular upgrades as a whole.

While Nx dramatically simplified the upgrade process, it is not bulletproof either. Here is a portion of the output when I tried to upgrade from Nx 15 to Nx 16. It mostly went well except for this one issue.

If you are curious, the Storybook was already migrated to V7 in a previous version, and all we had to do was ask Nx to bypass this migration which was easy to do.

Upgrade One Version at a Time

From what we’ve seen, even with Nx, the safest way to upgrade is to upgrade one major version at a time.

Personally, we upgrade to one minor version at a time. We compile, test, commit, rinse, and repeat. We fix any issues that arise, which makes the next migration a little easier. This usually takes about a week for each major version.

Hundreds of Files Updated

Over the years, we’ve noticed that almost every other major version of angular tends to update several hundred files. And no — we are not talking about simple whitespace or formatting changes.

Several hundred files changing every other major version is definitely a challenge to validate and handle the merge conflicts for other feature development.

Automated tests help greatly, but we still perform manual validations to make sure everything is working fine, even if most changes seem to be pretty straightforward.

This is a par course for a batteries-included framework where everything needs to be updated together, and you can’t pick and choose which subset to upgrade and when. Angular still being an evolving framework, I am not sure if this trend will slow down any time soon.

Angular Has Improved a Lot

As a framework, Angular has come far and added a lot of functionalities over the years. Angular’s idea of automatically modifying code to account for breaking changes is a game changer, even if it has hiccups from time to time. In recent years, Nx added support for React development and added automatic code migration to React as well which brings me to the next point.

What’s Next

This is the last version of Angular we will be upgrading to. We are in the process of migrating our app completely from Angular to React and expect to complete that by the end of this year or early next year. I will be writing more blog posts detailing the reasons why we are switching and the tradeoffs we are making. To summarize, we prefer the simplicity, flexibility, and freedom afforded by React to the structured development Angular provides.

Anbin Muniandy
CEO & Principal Engineer, YoPrint