'tried to update angular to 13 broke a bunch of stuff now trying to go back to angular 11 how to?

First I am the only one working on this project so we can completely nuke everything but the code of course.

I have tried things like this with no effect

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@11

when I try to run ng serve the current situation is like this

bullshit@ChristohersMBP2 decksite % ng serve
This version of CLI is only compatible with Angular versions ^13.0.0,
but Angular version 12.2.16 was found instead.

Please visit the link below to find instructions on how to update Angular.
https://update.angular.io/

What I did do that worked for a little is revert back to a old commit in my project but now that is not an option any more.

so my thoughts are to clear my package.json and delete package-lock.json and delete node_modules

and try to install the angular 11 cli again (as well as all other npm libraries i need since I no longer have my package.json populated.

Or even better go grab the package.json from a older commit since that is still an option and then do whatever I have to do on my local to completely wipe everything that is not source code. Delete current package.json , package-lock.json, node_modules, and run npm uninstall on everything? IDK whatever I have to do to wipe.

Place the new package.json in my angular project and then hit the npm install command.

that seems like a really good solution, am I hitting in the right place?



Solution 1:[1]

I typically do the following via (ng update):

  1. Make sure you are fully committed and functioning. Make a branch 'angular_13_update'
  2. Run ng update, it will come back with a report of things to update.
  3. I commonly npm install @angular/x, y, z per the list.
  4. See how it goes. Using 3rd party stuff sometimes leads to some complaints. --force can some times get that part done.
  5. If that bit succeeds test a build and see what broke as a result.

I believe from 11 to 13 you are going by Webpack 5 updates and other breaking changes. So depending on how much 3rd party i.e. commonjs style packages you have you may need to tweak your angular.json file with architect->build->options:

"allowedCommonJsDependencies": [
                            "uuid",
                            "ulid",
                            "url",
                            "lodash/get",
                            "lodash/isEmpty",
                            "lodash/isEqual",
                            "@aws-amplify/core",
..etc 

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mark