Unable to resolve dependencies for Angular Universal

Question

I need to use SSR for one of my existing angular project. For that, I have migrated one of my projects from v8 to v13.0.0, which itself took a lot of time.

HOwever, now that the app is running fine on v13.0.0, I tried adding SSR to it using

ng add @nguniversal/express-engine

This commands seems to add 13.0.1 of universal, but it keeps failing with errors similar to below one:

D:\my-app-universal>ng add @nguniversal/express-engine i Using package manager: npm √ Found compatible package version: @nguniversal/express-engine@13.0.1. √ Package information loaded.

The package @nguniversal/express-engine@13.0.1 will be installed and executed. Would you like to proceed? Yes npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: my-app-universal@0.0.0 npm ERR! Found: @angular/animations@13.0.3 npm ERR! node_modules/@angular/animations npm ERR! @angular/animations@"~13.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @angular/animations@"13.2.3" from @angular/platform-server@13.2.3 npm ERR! node_modules/@angular/platform-server npm ERR! peer @angular/platform-server@"^13.0.1" from @nguniversal/express-engine@13.0.1 npm ERR!
node_modules/@nguniversal/express-engine npm ERR!
@nguniversal/express-engine@"13.0.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. npm ERR! npm ERR! See C:\Users\saurabhtiwari\AppData\Local pm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\saurabhtiwari\AppData\Local pm-cache_logs\2022-02-20T12_03_46_821Z-debug.log × Package install failed, see above.

I have tried a lot to read through the errors and updating package.json to match the required version of peers but it just doesn't go away.

Is there a systematic way to resolve these errors. Is there a particular version of universal that might go well with Angular 13.

Any suggestions are welcomed.

user_5316255 · Answer

Thanks everyone for their inputs in the comment. I figured it out as below.

As suggested in comments, first I installed the universal package using --legacy --per --deps

npm install @nguniversal/express-engine --save --legacy-peer-deps

This installed the packages in the node_modules, although the required express-server related files were not added.

To add those files, I then ran:

ng add @nguniversal/express-engine

This creates the required file. It will also try to install the package again and will fail in doing so. Since the package have been installed already, I guess you can ignore its error.

user_7903952 · Answer

I followed @misha130's comments advice and fixed the version numbers. I didn't need to need to install with --legacy-peer-deps or --force.

The solution was to upgrade @angular/cli & @angular/core.

With a fresh install, my initial version was 13.0.4. You will need to upgrade them one at a time as the update command fails if there are staged and uncommitted changes in the repository.

ng update @angular/cli

git add . && git commit -m 'nguniversal fix 1 - update @angular/cli'

ng update @angular/core

git add . && git commit -m 'nguniversal fix 2 - update @angular/core'

ng add @nguniversal/express-engine

Unable to resolve dependencies for Angular Universal

2 Answers