Upgrading from Angular 12 to 14 is failing

Question

I want to update this code to Angular 14 from 12, but ng update isn't working:

https://github.com/PacktPublishing/Reactive-Patterns-with-RxJS-for-Angular/tree/main/Chapter04

npm install fails with:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: recipes-book@0.0.0
npm ERR! Found: rxjs@7.5.4
npm ERR! node_modules/rxjs
npm ERR!   rxjs@"7.5.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"^6.5.3" from @angular/core@12.1.5
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"~12.1.1" from the root project
npm ERR!   peer @angular/core@"12.1.5" from @angular/animations@12.1.5
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"~12.1.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

ng update gives:

Using package manager: npm
Collecting installed dependencies...
Found 0 dependencies.
    We analyzed your package.json, there are some packages to update:
    
      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cdk                       12.2.13 -> 13.3.9        ng update @angular/cdk@13
      @angular/cli                       12.1.4 -> 13.3.9         ng update @angular/cli@13
      @angular/core                      12.1.5 -> 13.3.9         ng update @angular/core@13

The update commands all fail with a message like this:

$ ng update @angular/cdk@13
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 13.3.9 to perform the update.
✔ Packages successfully installed.
Using package manager: 'npm'
Collecting installed dependencies...
Found 0 dependencies.
Package '@angular/cdk' is not a dependency.

ng version shows:

Angular CLI: 14.2.1
Node: 16.17.0
Package Manager: npm 8.15.0 
OS: linux x64

Angular: <error>
... animations, cdk, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.1 (cli-only)
@angular-devkit/build-angular   <error>
@angular-devkit/core            14.2.1 (cli-only)
@angular-devkit/schematics      14.2.1 (cli-only)
@angular/cli                    14.2.1 (cli-only)
@schematics/angular             14.2.1 (cli-only)
rxjs                            6.6.7 (cli-only)
typescript                      <error>

How can I upgrade this source to Angular 14?

Would the person who wants to close this please say why. This is the kind of problem that SO exists for. — Dean Schulze, Sep 06 '22 at 00:57
I think there's a bug in the current version of angular. They have messed up dependencies. In order to fix it, you would have to run `npm install --legacy-peer-deps`. I think there's not much we can do for now (maybe patching node_modules) — karoluS, Sep 06 '22 at 07:35
karoluS - Is the bug in Angular or npm? It works when I use `yarn install`. — Dean Schulze, Sep 06 '22 at 13:54

score 1 · Answer 1 · answered Sep 16 '22 at 10:25

NPM is not broken. It's telling you that you have specifically requested RxJS 7.5.4 together with the Angular 12.1.5 which supports RxJS 6 only. If there was e.g. a method removed from RxJS 7, Angular would try to call it and the project would be broken.

The right way, of course, would be downgrading the RxJS version that you are requesting in the package.json.

The wrong way would be instruct NPM to drop all dependency checks: npm install --force. This often leads to the application getting broken.

The middle ground way is to instruct NPM to drop specific dependency checks if you know that it's fine. In this particular case Angular is actually compatible with RxJS 7, they just started to support it officially later. So we can tell NPM to override Angular's peer dependency on RxJS:

package.json

{
  ...
  "overrides": {
    // possibly the other Angular packages as well
    "@angular/core": {
      "rxjs": "$rxjs" // use the version from the project instead
    }
  }
}

score 0 · Accepted Answer · answered Sep 06 '22 at 01:44

0

npm is broken. Running yarn install worked, with a few warnings about peer dependencies. The project runs.

answered Sep 06 '22 at 01:44

Dean Schulze

9,633
24
100
165

Upgrading from Angular 12 to 14 is failing

2 Answers2

package.json