Why My Angular 21 Upgrade Failed 👀

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'

Then another one appeared:

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

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

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

npm explain @angular-devkit/build-angular

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

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.

Comments

[Vinicius Pereira]

This is the right lesson, and it generalizes past Angular: on a major bump, a "cannot find module" almost never means the module is missing. It means the resolver is staring at a split-version tree and handing you the symptom in the wrong file.

The reason the clean reinstall worked is the part worth keeping. Your package-lock was still pinning @angular-devkit/build-angular@19 even after ng update moved core and material to 21, so deleting the lockfile let npm re-resolve the whole tree on one major. The npm explain you ran is the real hero here: it tells you who is dragging the old build-angular in, so next time you can dedupe or pin that one offender instead of nuking node_modules every time.

One guard I run after any framework major: npm ls @angular/core @angular/build @angular-devkit/build-angular in a single shot. If any of them shows up at two versions, that is your bug, before you ever look at the Material imports the compiler is complaining about.

Good writeup. The misleading-error angle is the most useful part.

[gulnur]

Thanks, every mistake taught me something new during this upgrade 😅

[Vinicius Pereira]

Honestly the best upgrades are the ones that leave you with a checklist for next time. And you did the useful part, writing it down instead of just fixing it quietly. That saves the next person the same afternoon.

[𝐓𝐡𝐞 𝐋𝐚𝐳𝐲 𝐆𝐢𝐫𝐥]

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!❤️

[gulnur]

Thanks for the support, my friend ❤️ I'm glad you enjoyed it. Hopefully my debugging marathon saves someone else a few hours 😄

[Michael Salinas]

Thanks for reaching out.
I'd be glad to help if there's anything I can assist with. Do you have any projects you're working on at the moment?

[Alex Shev]

Upgrade failures are valuable when they reveal the assumptions the old app was quietly carrying. The hard part is separating framework friction from local drift: custom build steps, old dependencies, unofficial patterns, and code that only worked because the previous version tolerated it.

[Michael Salinas]

Thank you for sharing such an excellent post. I really enjoyed reading it.

I’m a Python Full-Stack Engineer with over 10 years of experience designing and building scalable software solutions for clients across a variety of industries. Along the way, I’ve learned that successful projects depend not only on strong technical execution but also on creating real business value.

With my recent contract completed, I’m exploring new opportunities to collaborate with professionals who value innovation, practical problem-solving, and long-term partnerships. I enjoy discussing ideas that combine technical excellence with sound business strategy, creating outcomes that benefit everyone involved.

I believe every connection has the potential to become something meaningful. If you're interested in exchanging ideas, exploring opportunities, or simply connecting with someone who enjoys building impactful technology, I'd be happy to hear from you.

Wishing you success in your future endeavors, and I look forward to connecting.

[Olivier Spinelli]

I have a question: would you get the same misbehavior with yarn (instead of npm)?
(Please note that I'm NOT a frontend dev.)

[gulnur]

I occasionally use Yarn and Bun as well, but for this particular project I only used npm from the start. So I didn't get a chance to test whether the same issue would occur with Yarn.

[Nazar Boyko]

Nine times out of ten a "Cannot find module @angular/material/chips" during a version bump has nothing to do with Material, it's the build tool sitting one major behind the framework and the compiler choking and blaming the wrong thing. So the real tip buried in here is npm explain @angular-devkit/build-angular. Learning to distrust the error message and go check the toolchain version instead is the hard-won part, and it saves the afternoon you clearly lost. Did ng update skip the devkit for you, or was it pinned somewhere in package.json that kept it from moving?

[gulnur]

That's exactly what made this so confusing the error message sent me in the wrong direction for quite a while.
To make things worse, I ended up running several Angular and npm commands with --force. At some point, I honestly couldn't tell which command had actually helped me and which had made things worse. My node_modules also became inconsistent, which only added to the confusion. In my case, Im not sureng update is fully worked. I ended up with Angular 21 packages, while @angular-devkit/build-angular and later @angular/compiler-cli were still on older major versions. Running npm explain was what finally revealed the mismatch.

[Nazar Boyko]

thanks for sharing!