npm ERR! Could not resolve dependency: npm ERR! peer @angular/animations@"12.2.16" from @angular/platform-server@12.2.16

🐞 Bug report

The package @scullyio/init@2.1.14 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? Which route renderer would you like to use? Scully platform server
    Installing ng-lib
    Installing Scully Platform Server plugin
UPDATE src/app/app.module.ts (818 bytes)    
UPDATE src/polyfills.ts (2533 bytes)
UPDATE package.json (1995 bytes)
⠇ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree 
npm ERR!
npm ERR! While resolving: bulma-angular@0.0.0
npm ERR! Found: @angular/animations@13.2.4
npm ERR! node_modules/@angular/animations
npm ERR!   @angular/animations@"~13.2.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/animations@"12.2.16" from @angular/platform-server@12.2.16

Description

When I run ng add @scullyio/init, I get the error above.

npm ERR! ERESOLVE unable to resolve dependency tree 
npm ERR!
npm ERR! While resolving: bulma-angular@0.0.0
npm ERR! Found: @angular/animations@13.2.4
npm ERR! node_modules/@angular/animations
npm ERR!   @angular/animations@"~13.2.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/animations@"12.2.16" from @angular/platform-server@12.2.16
npm ERR! node_modules/@angular/platform-server
npm ERR!   @angular/platform-server@"^12" 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\ads\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ads\AppData\Local\npm-cache\_logs\2022-02-23T21_55_11_343Z-debug-0.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

🔬 Minimal Reproduction

In an angular 13 project type the command `ng add @scullyio/init"

💻Your Environment

Angular Version:

Angular CLI: 13.2.5
Node: 14.15.4
Package Manager: npm 8.3.0
OS: win32 x64

Angular: 13.2.4
... animations, cdk, cdk-experimental, common, compiler
... compiler-cli, core, forms, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.5
@angular-devkit/build-angular   13.2.5
@angular-devkit/core            13.2.5
@angular-devkit/schematics      13.2.5
@angular/cli                    13.2.5
@angular/platform-server        <error>
@schematics/angular             13.2.5
rxjs                            6.6.7
typescript                      4.5.5

Scully Version:

    "@scullyio/init": "^2.1.14",
    "@scullyio/ng-lib": "^2.1.0",
    "@scullyio/platform-server": "^2.1.0",
    "@scullyio/scully": "^2.1.0",

🔥 Exception or Error

53 error code ERESOLVE
54 error ERESOLVE unable to resolve dependency tree
55 error
56 error While resolving: bulma-angular@0.0.0
56 error Found: @angular/animations@13.2.4
56 error node_modules/@angular/animations
56 error   @angular/animations@"~13.2.4" from the root project
56 error
56 error Could not resolve dependency:
56 error peer @angular/animations@"12.2.16" from @angular/platform-server@12.2.16
56 error node_modules/@angular/platform-server
56 error   @angular/platform-server@"^12" from the root project
56 error
56 error Fix the upstream dependency conflict, or retry
56 error this command with --force, or --legacy-peer-deps
56 error to accept an incorrect (and potentially broken) dependency resolution.
56 error
56 error See C:\Users\ads\AppData\Local\npm-cache\eresolve-report.txt for a full report.

[edezekiel]

I’ve found that adding a .npmrc file to an Angular v13 project with legacy-peer-deps=true before running ng add @scullyio/init is another way to successfully install scully.

I took this approach from a recommendation to similar issue faced by ngrx: https://github.com/ngrx/platform/issues/2830#issuecomment-1047807929

[SanderElias]

@weirdyang This is not a bug. The current version doesn’t officially support Angular 13. There are 2 ways around this.

1. Use the @next version.
2. use the npm --legacy-peer-deps option

Also. we need node 14 or above, and a current NPM version. (8.3 or higher)

For both, you might want to manually install the dependencies:

# install the most current NPM version
npm i -g npm
# get rid of old possible conflicting packages
rm -fr node_modules
# remove the lock-file because it possible holds conflicting packages
rm package-lock.json
# Use npm with legacy deps, as this solves problems with 4rth party scripts
npm i --legacy-peer-deps 
# Install all the needed Scully packages in the correct order. 
npm i @scullyio/scully@next @scullyio/scully-plugin-puppeteer@next @scullyio/ng-lib@next @scullyio/init@next --legacy-peer-deps
# run the Scully `ng add` schematic manually
npx ng g @scullyio/init:ng-add --renderer puppeteer

If you prefer, you can replace the @next part with @2 (that’s the latest 2, you can be more specific if you like), and keep on running the current version instead.

I’m closing this for now, as I don’t think there is anything left we can do. If you have additional questions, we can keep discussing those here, and if needed, I’ll re-open the issue.