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.
Inst...
For further actions, you may consider blocking this person and/or reporting abuse
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-lockwas still pinning@angular-devkit/build-angular@19even afterng updatemoved core and material to 21, so deleting the lockfile let npm re-resolve the whole tree on one major. Thenpm explainyou 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 nukingnode_modulesevery time.One guard I run after any framework major:
npm ls @angular/core @angular/build @angular-devkit/build-angularin 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.
Thanks, every mistake taught me something new during this upgrade 😅
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!❤️
Thanks for the support, my friend ❤️ I'm glad you enjoyed it. Hopefully my debugging marathon saves someone else a few hours 😄
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?
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.
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.
I have a question: would you get the same misbehavior with yarn (instead of npm)?
(Please note that I'm NOT a frontend dev.)
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.
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. Didng updateskip the devkit for you, or was it pinned somewhere in package.json that kept it from moving?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. Mynode_modulesalso became inconsistent, which only added to the confusion. In my case, Im not sureng updateis fully worked. I ended up with Angular 21 packages, while@angular-devkit/build-angularand later@angular/compiler-cliwere still on older major versions. Runningnpm explainwas what finally revealed the mismatch.thanks for sharing!