DEV Community

gulnur
gulnur

Posted on

Why My Angular 21 Upgrade Failed ๐Ÿ‘€

#angular #upgrade #webdev

I believe Angular upgrades have become much smoother these days. Most of the time, a simple ng updateis enough to move to the latest version.

Instead, I spent hours chasing errors that looked completely unrelated to the real problem ๐Ÿ˜ญ

After upgrading the project to Angular 21, I started seeing errors like these:

Cannot find module '@angular/material/chips'
Cannot find module '@angular/material/dialog'
Enter fullscreen mode Exit fullscreen mode

Then another one appeared:

Error: The current version of "@angular/build" supports Angular ^19...
but detected Angular version 21.x instead.
Enter fullscreen mode Exit fullscreen mode

At first, it looked like Angular Material wasn't installed correctly but i think the actual issue was a version mismatch inside the project.

Some packages had already been upgraded to Angular 21:

  • @angular/core
  • @angular/common
  • @angular/material

But the build system was still using:

@angular-devkit/build-angular@19
Enter fullscreen mode Exit fullscreen mode

Since Angular's build tools are tightly coupled with the framework version, the compiler started producing misleading errors.

The build pipeline was the problem.

The Commands That Helped

I used these commands:

npm ls @angular-devkit/build-angular
Enter fullscreen mode Exit fullscreen mode 
npm explain @angular-devkit/build-angular
Enter fullscreen mode Exit fullscreen mode

They showed that my project was still resolving Angular 19's build package. That was the clue I needed and than I verified that every Angular package was using the same major version.

Then I cleaned the project completely:

rm -rf node_modules
rm package-lock.json
npm cache clean --force
npm install
Enter fullscreen mode Exit fullscreen mode

It takes time usually.(and I did it several times cause Im failed ๐Ÿ˜ƒ)

Finally, I confirmed that all Angular packages were aligned before building again.

Top comments (2)

Collapse
 
technogamerz profile image
๐•‹๐•™๐•– ๐•ƒ๐•’๐•ซ๐•ช ๐”พ๐•š๐•ฃ๐• • • Edited

Angular upgrades: "This should only take 10 minutes."

Reality: starts questioning every life decision since ng new.

Angular 21: "I'm just a minor upgrade."

Also Angular 21: "Welcome to today's debugging marathon."

Came for the upgrade, stayed for the emotional support bug fixes. ๐Ÿ˜… Great write-up!โค๏ธ

Collapse
 
glnurltn profile image
gulnur • • Edited

Thanks for the support, my friend โค๏ธ I'm glad you enjoyed it. Hopefully my debugging marathon saves someone else a few hours ๐Ÿ˜„