New v10 project with NPM 7+ fails peer dep resolution

[dgp1130]

🐞 Bug report

Command (mark with an x)

• new

Is this a regression?

Yes

Description

npx @angular/cli@10 new with NPM 7+ fails with a peer dep resolution error.

🔬 Minimal Reproduction

`npx @angular/cli@10 new`

$ npx @angular/cli@10 new --directory ng-v10
Need to install the following packages:
  @angular/cli@10
Ok to proceed? (y) y
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
? What name would you like to use for the new workspace and initial project? ng-v10
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE ng-v10/README.md (1014 bytes)
CREATE ng-v10/.editorconfig (274 bytes)
CREATE ng-v10/.gitignore (631 bytes)
CREATE ng-v10/angular.json (3566 bytes)
CREATE ng-v10/package.json (1249 bytes)
CREATE ng-v10/tsconfig.json (458 bytes)
CREATE ng-v10/tslint.json (3185 bytes)
CREATE ng-v10/.browserslistrc (853 bytes)
CREATE ng-v10/karma.conf.js (1018 bytes)
CREATE ng-v10/tsconfig.app.json (287 bytes)
CREATE ng-v10/tsconfig.spec.json (333 bytes)
CREATE ng-v10/src/favicon.ico (948 bytes)
CREATE ng-v10/src/index.html (291 bytes)
CREATE ng-v10/src/main.ts (372 bytes)
CREATE ng-v10/src/polyfills.ts (2830 bytes)
CREATE ng-v10/src/styles.css (80 bytes)
CREATE ng-v10/src/test.ts (753 bytes)
CREATE ng-v10/src/assets/.gitkeep (0 bytes)
CREATE ng-v10/src/environments/environment.prod.ts (51 bytes)
CREATE ng-v10/src/environments/environment.ts (662 bytes)
CREATE ng-v10/src/app/app.module.ts (314 bytes)
CREATE ng-v10/src/app/app.component.css (0 bytes)
CREATE ng-v10/src/app/app.component.html (25725 bytes)
CREATE ng-v10/src/app/app.component.spec.ts (940 bytes)
CREATE ng-v10/src/app/app.component.ts (210 bytes)
CREATE ng-v10/e2e/protractor.conf.js (869 bytes)
CREATE ng-v10/e2e/tsconfig.json (294 bytes)
CREATE ng-v10/e2e/src/app.e2e-spec.ts (639 bytes)
CREATE ng-v10/e2e/src/app.po.ts (301 bytes)
⠏ Installing packages...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ng-v10@0.0.0
npm ERR! Found: jasmine-core@3.6.0
npm ERR! node_modules/jasmine-core
npm ERR!   dev jasmine-core@"~3.6.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.8" from karma-jasmine-html-reporter@1.7.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR!   dev karma-jasmine-html-reporter@"^1.5.0" 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 /home/douglasparker/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/douglasparker/.npm/_logs/2021-11-23T01_05_37_847Z-debug.log
✖ Package install failed, see above.
The Schematic workflow failed. See above.

🌍 Your Environment

Running NPM 8.1.4, but I assume this is present in any NPM 7+ version.

Anything else relevant?

Generating the application succeeded, it's only the subsequent npm install that failed. Running npm install --legacy-peer-deps worked as expected.

I know v10 is falling out of LTS soon, but I'm wondering if we should consider making it install with legacy peer deps automatically. Otherwise we can try to actually debug the conflict and come up with a non-legacy peer deps-compatible solution, but that might not be worth the effort right now.

[alan-agius4]

In this case I think we can just change karma-jasmine-html-reporter to use a tilda instead of a caret which should address the issue.

I think this same dependency might be effecting other LTS versions.

[alan-agius4]

Closed via #22219

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}