NPM Dependency Errors When Creating a New Project with Ionic CLI

Hello!

Background: I’m not sure if this is an Ionic issue, NPM issue, issue with my configuration, or an Angular issue. By trade I’m a cloud / DevOps guy but Node and JavaScript are new to me. Any help with this issue would be hugely appreciated as it will teach me how to “fish for myself” in the future.

I was able to generate projects with “ionic start” in the past but now I’m getting ERESOLVE errors when trying to create a new Angular project. The only thing that may have changed on my system is npm / node which I update via Brew on my Mac laptop (Big Sur version).

My Node and NPM environments:

JoshTs-MacBook-Air:ionictmp josht$ npm --version
7.3.0
$ node --version
v15.5.0
$ npm ls -g
/usr/local/lib
├── @angular-devkit/build-angular@0.1100.5
├── @angular/compiler-cli@11.0.5
├── @angular/compiler@11.0.5
├── @capacitor/cli@2.4.5
├── @capacitor/core@2.4.5
├── @ionic/cli@6.12.3
├── cordova@10.0.0
├── follow-redirects@1.13.1
├── ionic@
├── npm-check-updates@10.2.5
├── npm@7.3.0
└── typescript@3.9.5

$ npm ls
josht@ /Users/josht
├── @capacitor/cli@2.4.5
├── @capacitor/core@2.4.5
├── @ionic/storage@2.3.1
└── npm-check-updates@10.2.5

JoshTs-MacBook-Air:ionictmp josht$ ionic --version
6.12.3
$ capacitor --version
2.4.5
$

When I “ionic start” with React or Vue things work fine and the project is created successfully.

When I try to “ionic start” any type of Angular project (besides my-first-app & conference) it fails with the following:

$ ionic start testproject blank --type angular
✔ Preparing directory ./testproject in 24.32ms
✔ Downloading and extracting blank starter in 419.27ms
? Integrate your new app with Capacitor to target native iOS and Android? No

Installing dependencies may take several minutes.

  ──────────────────────────────────────────────────────────────

        Ionic Appflow, the mobile DevOps solution by Ionic

           Continuously build, deploy, and ship apps 🚀
        Focus on building apps while we automate the rest 🎁

                 👉  https://ion.link/appflow  👈

  ──────────────────────────────────────────────────────────────


> npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: testproject@0.0.1
**npm ERR! Found: typescript@4.0.5**
npm ERR! node_modules/typescript
npm ERR!   peer typescript@">=3.9 <4.1" from @angular/compiler-cli@10.2.4
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     peer @angular/compiler-cli@">=10.0.0-next.0 < 11" from @angular-devkit/build-angular@0.1000.8
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR! 
**npm ERR! Could not resolve dependency:**
**npm ERR! peer typescript@">=3.9 < 3.10" from @angular-devkit/build-angular@0.1000.8**
**npm ERR! node_modules/@angular-devkit/build-angular**
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/josht/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/josht/.npm/_logs/2020-12-24T21_12_48_169Z-debug.log
[ERROR] An error occurred while running subprocess npm.
        
        npm i exited with exit code 1.
        
        Re-running this command with the --verbose flag may provide more information.
$ 

In the package.json in the testproject directory I see in the DevDepenencies section:

"typescript": "~3.9.5"

Some things I tried:

  • “npm update”
  • npm cache clear --force
  • The global version of typescript WAS 4.0.5 but I uninstall then re-install 3.9.5 but “npm i” still says it has found version 4.0.5
  • Reboot (haha)

The question is this: Why does NPM think I have typescript@4.0.5 installed when “npm ls -g” is showing version 3.9.5?

I’m not sure what else to try at this point. Things used to work. I could rip out all of node and NPM and re-install it but that seems like overkill. I could downgrade the global NPM Angular packages to 10.x but to be candid I don’t remember if they were always 11.x or if they were upgraded to 11.x as part of my troubleshooting.

I’ve worked with dependencies before but I"m baffled.

Any help would be much appreciated.

4 Likes

If you don’t get any better answers, stop doing this and instead use nvm.

Hi,

Same thing occurs to me. I’ve tried 2 days ago and today I tried reinstalling, but still not working. I’m using nvm on windows 10, via git bash:

$ npm --version
7.3.0

$ node --version
v15.5.0

$ ionic --version
6.12.3

Executing ionic start <project_name> tabs raises the same error @JJT described.
I’m also also trying with Angular version.

Hope this helps.

1 Like

Hi there, I’ve been encountering the same issue on my machine. Recently started reading Ionic’s docs and wanted to try following the Angular Ionic Photo Gallery app tutorial. I installed the @ionic/cli, native-run & cordova-res as required by the tutorial. When I ran the ionic start command though, the following dependency errors were thrown:

$ ionic start photo-gallery tabs --type=angular --capacitor
√ Preparing directory .\photo-gallery in 1.51ms
√ Downloading and extracting tabs starter in 1.44s
> ionic integrations enable capacitor --quiet -- photo-gallery io.ionic.starter
> npm.cmd i --save -E @capacitor/core
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ionic-app-base@0.0.0
npm ERR! Found: typescript@4.0.5
npm ERR! node_modules/typescript
npm ERR!   peer typescript@">=3.9 <4.1" from @angular/compiler-cli@10.2.4
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     peer @angular/compiler-cli@">=10.0.0-next.0 < 11" from @angular-devkit/build-angular@0.1000.8
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@">=3.9 < 3.10" from @angular-devkit/build-angular@0.1000.8
npm ERR! node_modules/@angular-devkit/build-angular
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\roshe\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\roshe\AppData\Local\npm-cache\_logs\2020-12-27T03_34_44_832Z-debug.log
[ERROR] An error occurred while running subprocess npm.

        npm.cmd i --save -E @capacitor/core exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

Installing dependencies may take several minutes.

  ──────────────────────────────────────────────────────────────

        Ionic Appflow, the mobile DevOps solution by Ionic

           Continuously build, deploy, and ship apps
        Focus on building apps while we automate the rest

        Learn more: https://ion.link/appflow

  ──────────────────────────────────────────────────────────────


> npm.cmd i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: photo-gallery@0.0.1
npm ERR! Found: typescript@4.0.5
npm ERR! node_modules/typescript
npm ERR!   peer typescript@">=3.9 <4.1" from @angular/compiler-cli@10.2.4
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     peer @angular/compiler-cli@">=10.0.0-next.0 < 11" from @angular-devkit/build-angular@0.1000.8
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@">=3.9 < 3.10" from @angular-devkit/build-angular@0.1000.8
npm ERR! node_modules/@angular-devkit/build-angular
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\roshe\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\roshe\AppData\Local\npm-cache\_logs\2020-12-27T03_34_47_281Z-debug.log
[ERROR] An error occurred while running subprocess npm.

        npm.cmd i exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

I tried debugging using the --verbose flag, but I couldn’t pin-point where the error was coming from. I’ve uninstalled and reinstalled the typescript, @angular/cli and ionic NPM packages but that didn’t fix anything.

For context, I’m using NVM for Windows on a Git Bash terminal. Here is my current environment (all of these packages/tools are installed globally):

  • NVM: 1.1.7
  • Node: 15.5.0
  • NPM: 7.3.0
  • Typescript: 4.1.3
  • Angular CLI: 11.0.5
  • Ionic: 6.12.3

Hopefully this issue gets resolved soon, as I need to familiarize myself with Ionic for a job opportunity. Thanks in advance.

I have the same problem, any idea ?

Can people here see if their problems persist even when using LTS versions of node and npm? Specifically, roll back from npm 7.

I Solved using node LTS version, Unistalled node 15.5.0 version and installed 14.15.3 LTS version.

new versions:
npm version -6.14.9
node version -14.15.3
ionic version 6.12.3

Command used: ionic start test and works fine.

Thanks @rapropos

7 Likes

So as suggested by @rapropos and @CriMartinezD0, I installed Node LTS v14.15.3 with NPM v6.14.9 and the ionic start command works perfectly now. However this is really concerning as it raises the question of when Ionic Angular will introduce support for Node v15+.

Regardless, thank you for the tips everyone. I can now continue with my project.

Unless you want to be part of finding bugs like this, it is never a good idea to use odd-numbered Node releases with Ionic development.

1 Like

Good to know, this is news to me as I’ve never used Ionic before. Cheers.

Thanks for the help everyone – I ripped out my Brew node & npm stuff, installed nvm, installed 14.x LTS and things are working.

Thanks again!!

1 Like

Hi! I have the same problem, I install everything again and when I make the command >npm ls -g I get an infinite list like this:

±- @capacitor/cli@2.4.5
| ±- chalk@2.4.2
| | ±- ansi-styles@3.2.1
| | | -- color-convert@1.9.3 | | | – color-name@1.1.3
| | ±- escape-string-regexp@1.0.5
| | -- supports-color@5.5.0 | | – has-flag@3.0.0
… and much more!!

I was ready to install all the packages but I am not able to see which packages I have installed!
Because >npm ls -g don’t show me what I want.
How can I solve it?
Thank u

es la solucion los recomiendo desinstalen y instales la version nodo LTS

I have the LTS and still getting such errors…

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: xstories@1.2.0
npm ERR! Found: typescript@4.0.7
npm ERR! node_modules/typescript
npm ERR!   peer typescript@">=3.9 <4.1" from @angular/compiler-cli@10.2.4
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     peer @angular/compiler-cli@">=10.0.0-next.0 < 11" from @angular-devkit/build-angular@0.1000.8
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@">=3.9 < 3.10" from @angular-devkit/build-angular@0.1000.8
npm ERR! node_modules/@angular-devkit/build-angular
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.

Any ideas how to solve it?

This is a npm 7 problem, so the node version doesn’t matter that much, only the npm version.
You can downgrade to npm 6 as angular seems to have a lot of problems with npm 7 (not just the peer dependencies problems).

But ionic templates are now updated to properly install on npm 7. But still, if using angular, I would recommend using npm 6 for a while.

Does ionic-angular still have problem with npm7? I am having the same issue as the original post and I am using npm7 and ionic-angular.

Had a similar issue with node start using npm v7.5.2 and was fixed by upgrading to v7.22.0.