A few months ago, our team made the smart move to migrate our component library from Lerna to Nx. The decision brought us the benefit of faster builds, thanks to Nx’s excellent caching feature. However, one challenge we faced was the absence of Angular CLI support, rendering commands like ng update ineffective.
Previously, we would have followed the official angular update guide, which is an amazing tool that walks you through the update process.
In the past, we would have turned to the official Angular update guide, a fantastic tool that walks you through the update process. Unfortunately, the provided commands, such as:
ng update @angular/core@17 @angular/cli@17Code language: CSS (css)don’t work in an Nx workspace.
Thankfully, Nx provides its own command to upgrade existing packages to the next version.
Instead of ng update, you’ll use:
npx nx migrate @angular/core@17 @angular/cli@17Code language: CSS (css)It’s worth noting that this command needs to be repeated for each package that requires an update.
Following the Angular Update Guide is still very much useful to identify the core packages that need updating.
You’ll likely have lots of packages that need verification for compatibility with the Angular version you’re upgrading to. Unfortunately, the only way to identify these packages is to run npm install and inspect the warnings in the console. Following the hints in the console, visit npmjs.com to find the correct version of the package aligning with the desired Angular version.
Some packages generously provide a compatibility matrix for Angular, like @ng-select/ng-select
Identifying all packages that need updating involves a bit of trial and error.
You’ll need to install packages every time you make a version update in package.json.
Once you’ve correctly identified and updated package versions, proceed to run the build in the monorepository using:
nx run-many --target=build --all=trueCode language: JavaScript (javascript)This step may uncover errors related to breaking changes in the new versions.
Keep a close eye on the console to identify the issues. With some assistance from our friend Google, you should be able to resolve these issues.
Next, run all unit tests to ensure there aren’t any breaking changes.
Once they all pass, consider checking the target JavaScript framework in your workspace. We had some projects targeting ES2015 and others ES2020. It’s time to align them all with the same version.
Updating Angular versions is like giving your code a spa day — it’s refreshing, and might involve a few unexpected twists. Good luck!
