Update Angular from 12 to 17 (2) --- in a nx environment

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

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

A - Introduction

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

The content of this article:

A - Introduction
B - Way to Update an Angular App
C - Start to Update an Angular
D - What is UX
E - How to Update a Nx-Angular App
F - Update a Nx-Angular App

B - Way to Update an Angular App

We follow the work from article Update Angular from 12 to 17 (1) --- Initial Point and start to update the Angular app.

For an Angular app upgrding, we have discussed in my previous article, Update Angular For Environment And Project. Starting from Angular 6, the process of upgrading or updating the Angular apps to the latest version has become very easy. You can follow this Angular Update Guide step by step, such as

The above gave the detailed steps needed to update Angular to the version 7 from version 2.4.

C - Start to Update an Angular

What we need to do is

Get the current Angular version;
According to the Angular version, check on Angular Update Guide to get the updating schedule.

Let us get the Project Angular version first. The environment is used to be like this

and for the app to run, we downgraded the node to v16:

We need to run ng -v within the project to get the project Angular version. However, we got difficulty like this:

To fix it, we upgraded Node.js to version 18.9.0, however, the Angular version within the project is still the same as what the environment is: --- Version 18.2.4

instead of as shown in package.json file, the version should be 12.

On the other hand, if we remove Angular globally,

the App is still running well.

We realize that the Angular App is not driven by Angular environment, but by nx.

D - What is UX

Search on Google for angular vs. nx, AI tells us:

Nx and Angular CLI are both tools used in Angular projects, but they're best suited for different project needs and scales:

Angular CLI

A good choice for small to medium-sized projects, Angular CLI is a straightforward and efficient tool. It uses Webpack's caching to speed up the process.
Nx

A better choice for large-scale, complex applications, especially those that use a mono repo approach. Nx has several features that make it fast, including caching tasks, resource sharing, and automatic dependency updates.

Here are some other differences between Nx and Angular CLI:

Dependency visualization

Nx has a built-in command, nx dep-graph, that can visualize a dependency graph. Angular CLI doesn't have a built-in command for this.
Affected commands

Nx has a built-in command, nx affected:build, that can build only the projects that have been affected by changes. Angular CLI doesn't have a built-in command for this.
Architecture

Nx encourages breaking down applications into smaller, domain-focused libraries. This can improve the application's architecture and maintainability.
Version updates

Using Nx, you can update the entire repo with a couple of commands to ensure everything is compatible.
The latest version of Nx supports the actively supported versions of Angular.

E - How to Update a Nx-Angular App

Search on Google for how to update a nx-angular project, AI tells us:

AI Overview

Learn more…Opens in new tab

To update an NX-Angular project, you can use the following commands:

npx nx migrate latest (or certain version): Updates dependencies in package.json and generates a migrations.json file
npm install: Installs the new dependencies
npx nx migrate --run-migrations: Executes the migration scripts based on migrations.json

Nx migrations can streamline the process of updating an Angular and Nx workspace. However, they may not always cover every aspect, so you can refer to other projects for guidance. You can also create a new workspace with the latest version, compare the changes, and incorporate them into your existing workspace.

Here are some other things to consider when updating an NX-Angular project:

Nx plugins: Nx plugins can provide migrations for their specific areas of competency. For example, the Nx React plugin knows where to find React configuration files and how to apply changes when updating to a specific version of React.
Skipped package updates: If you skip package updates, you can find a suggested command to run in the "Next steps" section. You can store this information so you can remember which version to run the migration from.
Rerunning migrations: Nx migrate allows you to rerun the same migration multiple times.
Reordering migrations: Nx migrate allows you to reorder migrations.

F - Update a Nx-Angular App

We will discuss the details in the next article

References: