Creating a Angular project fails with npm 7

[joseph-navant]

Description: npm 7 became generally available the other day and it handles peer dependencies more strictly.

As a result creating an Ionic Angular project with the CLI fails due to incompatible dependency versions.

(credits to @mirkonasato for issue explanation)

Steps to Reproduce: Upgrade to the latest npm version:

npm install -g npm

then try creating an Ionic React project:

ionic start my-app blank --type=angular

Output: The command fails with

> npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: blank@0.0.1
npm ERR! Found: @angular/compiler@11.0.9
npm ERR! node_modules/@angular/compiler
npm ERR!   dev @angular/compiler@"~11.0.5" from the root project
npm ERR!   peer @angular/compiler@"11.0.9" from @angular/compiler-cli@11.0.9
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     dev @angular/compiler-cli@"~11.0.5" from the root project
npm ERR!     peer @angular/compiler-cli@"^11.0.0" from @angular-devkit/build-angular@0.1100.7
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"~0.1100.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"11.1.2" from @angular/localize@11.1.2
npm ERR! node_modules/@angular/localize
npm ERR!   peerOptional @angular/localize@"^11.0.0" from @angular-devkit/build-angular@0.1100.7
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~0.1100.5" 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 /Users/joseph/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/joseph/.npm/_logs/2021-02-09T10_39_21_062Z-debug.log
[ERROR] An error occurred while running subprocess npm.

        npm i exited with exit code 1.

ionic info:

[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 6.12.4

Utility:

   cordova-res : 0.15.3
   native-run  : not installed

System:

   NodeJS : v14.15.4
   npm    : 7.5.3
   OS     : macOS Big Sur

Other Information: I tried npm 7 in my ionic project (with updated dependencies) and it worked: My ionic info:

Ionic:

   Ionic CLI                     : 6.12.4 (/Users/joseph/.nvm/versions/node/v14.15.4/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.4
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.0.5
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.0.0

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.6

Utility:

   cordova-res : 0.15.3
   native-run  : not installed

System:

   NodeJS : v14.15.4 (/Users/joseph/.nvm/versions/node/v14.15.4/bin/node)
   npm    : 7.5.3
   OS     : macOS Big Sur

[alepila]

He! I have the same problem. Did you solve it?

[boolai]

Yes how did you solve it? I have the same problem

[alepila]

I use windows, delete node.js, download the latest version and install it. it worked!!

[SeaEagleEye]

I'm facing same issue in mac

[joseph-navant]

I'm on mac also and I'm able to use npm 7.5.3 with node 14.15.4. I think it is project dependencies related. This is my package.json dependencies (maybe you don't need many of them):

{
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@agm/snazzy-info-window": "^1.1.0",
    "@angular/common": "~11.1.2",
    "@angular/core": "~11.1.2",
    "@angular/fire": "^6.1.4",
    "@angular/forms": "~11.1.2",
    "@angular/platform-browser": "~11.1.2",
    "@angular/platform-browser-dynamic": "~11.1.2",
    "@angular/router": "~11.1.2",
    "@capacitor-community/apple-sign-in": "^1.0.0",
    "@capacitor-community/firebase-analytics": "^0.2.0",
    "@capacitor-community/firebase-crashlytics": "^0.3.0",
    "@capacitor/android": "^2.4.6",
    "@capacitor/core": "^2.4.6",
    "@capacitor/ios": "^2.4.6",
    "@ionic-native/core": "^5.31.1",
    "@ionic/angular": "^5.5.4",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "capacitor-firebase-auth": "^2.4.0-alpha.0",
    "capacitor-secure-storage-plugin": "^0.5.0",
    "chart.js": "^2.9.4",
    "core-js": "^2.6.12",
    "firebase": "^8.2.6",
    "flatted": "^3.1.1",
    "moment": "^2.29.1",
    "ng-circle-progress": "^1.6.0",
    "ng2-charts": "^2.4.2",
    "ng2-pdf-viewer": "^6.3.2",
    "ngx-translate-multi-http-loader": "3.0.0",
    "rxjs": "~6.6.3",
    "snazzy-info-window": "^1.1.1",
    "tslib": "^2.1.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.4",
    "@angular/cli": "~11.1.4",
    "@angular/compiler": "~11.1.2",
    "@angular/compiler-cli": "~11.1.2",
    "@angular/language-service": "~11.1.2",
    "@capacitor/cli": "^2.4.6",
    "@ionic/angular-toolkit": "^3.0.0",
    "@types/jasmine": "~3.5.14",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.19.16",
    "codelyzer": "^6.0.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.3",
    "typescript": "~4.0.5"
  }
}

[jcesarmobile]

this should fix the problem https://github.com/ionic-team/starters/pull/1671

[jcesarmobile]

installing fine now, closing

[rjousse18]

how to update to new starter template ?

[jcesarmobile]

You don't have to do anything, the CLI will use latest version available and it was updated on Friday. But if you are getting older versions, try updating @ionic/cli

[calete]

I downgrade node to 6.14.13 and woked fine. [sudo] npm i -g npm@6.14.13