@angular/common error -> ngx new

[FabienCOTE]

I'm submitting a...

• [ x] Bug report
• [ ] Feature request
• [ ] Documentation issue or request
• [ ] Question

Current behavior

npm init ngx doesn't succeed to build a new project.

Expected behavior

That it would succeed on first try.

The fix seems to be that @angular/common needs to be 10.0.0 instead of 11.2.14 as seen in error message below. Remove "@ng-bootstrap/ng-bootstrap": "^8.0.0" to launch "npm i"

Minimal reproduction of the problem with instructions

Generating a new project with

F:\CODE\project\client>ngx new
          __   __
 _ _  __ _\ \./ / ____ ____ ____ _  _ ____ ___
| ' \/ _` |>   <  |--< [__] |___ |-:_ |===  |
|_||_\__, /_/°\_\ ENTERPRISE APP STARTER -~*=>
     |___/ v9.2.0

? What is the name of your app? website
? What kind of app do you want to create? Web app
? Do you want a progressive web app? (with manifest and service worker) Yes
? Which UI framework do you want? Bootstrap (more website-oriented)
? Do you want authentication? Yes 
? Do you want lazy loading? Yes
? Do you want analytics support (with Angulartics2)? No
? Which languages do you want to support? en-US, fr-FR
? Do you want additional tools? Prettier (automatic code formatting), Hads (markdown-based doc system)   
? Do you want additional libraries? Lodash (collection & general utilities)
? Which automatic deployment do you want? No deployment
   create package.json     
    force .yo-rc.json      
   create .editorconfig    
   create .htmlhintrc      
   create proxy.conf.js    
   create tsconfig.app.json
   create .browserslistrc  
   create .gitignore       
   create .stylelintrc
   create angular.json
   create README.md
   create tsconfig.json
   create tsconfig.spec.json
   create tslint.json
   create ngsw-config.json
   create karma.conf.js
   create docs\backend-proxy.md
   create docs\i18n.md
   create docs\routing.md
   create docs\analytics.md
   create docs\corporate-proxy.md
   create docs\updating.md
   create docs\readme.md
   create docs\coding-guides\angular.md
   create docs\coding-guides\e2e-tests.md
   create docs\coding-guides\html.md
   create docs\coding-guides\build-specific-configurations.md
   create docs\coding-guides\sass.md
   create docs\coding-guides\typescript.md
   create docs\coding-guides\unit-tests.md
   create e2e\tsconfig.json
   create e2e\protractor.conf.js
   create e2e\src\app.e2e-spec.ts
   create e2e\src\page-objects\app-shared.po.ts
   create e2e\src\page-objects\shell.po.ts
   create e2e\src\page-objects\login.po.ts
   create src\typings.d.ts
   create src\index.html
   create src\main.scss
   create src\main.ts
   create src\polyfills.ts
   create src\manifest.webmanifest
   create src\test.ts
   create src\apple-touch-icon.png
   create src\favicon.ico
   create src\robots.txt
   create src\assets\ngx-rocket-logo.png
   create src\assets\ngx-rocket-logo@192.png
   create src\environments\environment.prod.ts
   create src\environments\environment.ts
   create src\translations\en-US.json
   create src\translations\fr-FR.json
   create src\theme\theme.scss
   create src\theme\theme-variables.scss
   create src\app\app-routing.module.ts
   create src\app\app.component.html
   create src\app\app.component.scss
   create src\app\app.component.spec.ts
   create src\app\app.component.ts
   create src\app\app.module.ts
   create src\app\about\about.component.ts
   create src\app\about\about.component.scss
   create src\app\about\about-routing.module.ts
   create src\app\about\about.component.spec.ts
   create src\app\about\about.component.html
   create src\app\about\about.module.ts
   create src\app\auth\login.component.html
   create src\app\auth\login.component.scss
   create src\app\auth\auth-routing.module.ts
   create src\app\auth\authentication.guard.ts
   create src\app\auth\authentication.service.mock.ts
   create src\app\auth\authentication.service.spec.ts
   create src\app\auth\credentials.service.spec.ts
   create src\app\auth\credentials.service.mock.ts
   create src\app\auth\authentication.service.ts
   create src\app\auth\credentials.service.ts
   create src\app\auth\index.ts
   create src\app\auth\auth.module.ts
   create src\app\auth\authentication.guard.spec.ts
   create src\app\auth\login.component.spec.ts
   create src\app\auth\login.component.ts
   create src\app\home\home-routing.module.ts
   create src\app\home\home.component.ts
   create src\app\home\quote.service.spec.ts
   create src\app\home\quote.service.ts
   create src\app\home\home.component.scss
   create src\app\home\home.component.spec.ts
   create src\app\home\home.module.ts
   create src\app\home\home.component.html
   create src\app\i18n\i18n.service.spec.ts
   create src\app\i18n\index.ts
   create src\app\i18n\i18n.service.ts
   create src\app\i18n\i18n.module.ts
   create src\app\i18n\language-selector.component.scss
   create src\app\i18n\language-selector.component.spec.ts
   create src\app\i18n\language-selector.component.html
   create src\app\i18n\language-selector.component.ts
   create src\app\@core\logger.service.ts
   create src\app\@core\logger.service.spec.ts
   create src\app\@core\route-reusable-strategy.ts
   create src\app\@core\core.module.ts
   create src\app\@core\index.ts
   create src\app\@core\http\api-prefix.interceptor.spec.ts
   create src\app\@core\http\api-prefix.interceptor.ts
   create src\app\@core\http\error-handler.interceptor.spec.ts
   create src\app\@core\http\error-handler.interceptor.ts
   create src\app\@shared\index.ts
   create src\app\@shared\shared.module.ts
   create src\app\@shared\loader\loader.component.scss
   create src\app\@shared\loader\loader.component.spec.ts
   create src\app\@shared\loader\loader.component.ts
   create src\app\@shared\loader\loader.component.html
   create src\app\shell\shell.component.scss
   create src\app\shell\shell.component.spec.ts
   create src\app\shell\shell.module.ts
   create src\app\shell\shell.service.spec.ts
   create src\app\shell\shell.service.ts
   create src\app\shell\shell.component.html
   create src\app\shell\shell.component.ts
   create src\app\shell\header\header.component.scss
   create src\app\shell\header\header.component.html
   create src\app\shell\header\header.component.spec.ts
   create src\app\shell\header\header.component.ts
'git' n’est pas reconnu en tant que commande interne
ou externe, un programme exécutable ou un fichier de commandes.

Running npm install, please wait…
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: website@1.0.0
npm ERR! Found: @angular/common@11.2.14
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^11.0.8" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^10.0.0" from @ng-bootstrap/ng-bootstrap@8.0.4
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!   @ng-bootstrap/ng-bootstrap@"^8.0.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 C:\Users\Fabien\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\Fabien\AppData\Local\npm-cache\_logs\2021-05-30T17_45_47_635Z-debug.log

All done! Get started with these tasks:
- $ npm start: start dev server with live reload on http://localhost:4200
- $ npm run build: build web app for production
- $ npm test: run unit tests in watch mode for TDD
- $ npm run test:ci: lint code and run units tests with coverage
- $ npm run e2e: launch e2e tests
- $ npm run docs: show docs and coding guides
- $ npm run prettier: format your code automatically

Environment

F:\CODE\project\client>ngx --debug-infos
ngX-Rocket: 9.2.0
Node.js: v14.17.0
Npm: 7.15.0
OS: win32 x64 10.0.19042      

Generated project options:    
{
  "generator-ngx-rocket": {   
    "version": "9.2.0",       
    "props": {
      "location": "path",     
      "strict": false,        
      "skipInstall": false,   
      "skipQuickstart": false,
      "initGit": true,        
      "usePrefix": true,      
      "appName": "website",   
      "target": [
        "web"
      ],
      "pwa": true,
      "ui": "bootstrap",
      "auth": true,
      "lazy": true,
      "angulartics": false,
      "languages": [
        "en-US",
        "fr-FR"
      ],
      "tools": [
        "prettier",
        "hads"
      ],
      "utility": [
        "lodash"
      ],
      "deploy": "none",
      "projectName": "website",
      "packageManager": "npm",
      "mobile": [],
      "desktop": []
    }
  }
}
npm ERR! could not determine executable to run

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Fabien\AppData\Local\npm-cache\_logs\2021-05-30T17_52_23_284Z-debug.log

Others:

[sinedied]

Thanks for the report! This issue is due to the fact that Angular 10 (mostly the packages around it) doesn't support NPM 7. You'll need to use NPM 6 until all the Angular ecosystem properly supports the new version (ie all peer dependencies are properly set). I'm currently making some tests with the newer Angular 12 version, meanwhile the best workaround would probably be to force the --legacy-peer-deps flag in the Yeoman npm install step if NPM 7 is detected.

[ci-rebot]

:tada: This issue has been resolved in version 10.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: