Update Angular from 12 to 17 (3) --- to Latest or Version by Version?

Note: This article was published on 10/08/2024.

This is a seres of articles about Angular Installation, Upgrading.

A - Introduction

This article is to discuss the upgrading approaches for an Angular app in a nx environment.

The content of this article:

A - Introduction
B - Two Approaches to Update an Angular App in nx environment
C - Update to Latest Vertion
D - Update version by version

B - Two Approaches to Update an Angular App in nx environment

As we discussed in the previous article, Update Angular from 12 to 17 (2) --- in a nx environment,

An Angular app developed in a nx environment, cannot be updated by updating Angular, but by nx
The updating procedure should follow the instruction
1. npx nx migrate latest (or certain version): Updates dependencies in package.json and generates a migrations.json file
2. npm install: Installs the new dependencies
3. npx nx migrate --run-migrations: Executes the migration scripts based on migrations.json

From the video Automate Updating Dependencies | Nx, although upgrade version by version is suggested, but in nx, there is a choice that one can upgrade the app from lower version to the latest directly. Let us try first.

C - Update to Latest Vertion

We started from the environment:

Step 1: Run the command

npx nx migrate latest

We got:

This step will create two files:

pachage.json
migration.json

In the Package.json file, we can see the version upgrading:

Angular from 12.1.0 upgraded to 18.2.6

nx is upgraded from 12.8.0 to 18.8.2

Step 2: run command to install libraries:

npm install --legacy-peer-deps

we got

continue:

Successful.

Step 3: Run the migration

nx migrate --run-migrations

Continue:

However, we got an error message:

By the second run, we got another error message:

D - Update version by version

First we try to upgrade to v13 from v12, by

npm nx migrate [email protected]

It is notthing we need to do:

then we tried to upgrade to version 14, by

npx nx migrate [email protected]

In fact, we follow these two articles:

They are one successfully to upgrade nx to the latest version step by step. And actually, they tried to upgrade to latest version first, and failed as what I did.

In short, the procedure is similar to the one updating to latest version, all three steps of updating

npx nx migrate to certain version (14)
npm install: Installs the new dependencies
npx nx migrate --run-migrations: Executes the migration scripts based on migrations.json

are succussful.

This error is eazy to be fixed. We will not discuss the error details, and leave those to the following article, at this poinnt, we got the conclusion,

Probably the upgrading version by version is a workable approach.

Note:

The next article we will discuss the debugging processes.
The following approaches are from one article Migrating an Angular Nx Workspace to V17 (offering.solutions) that could be a reference for us

References: