Angular NPM install but getting ERESOLVE unable to resolve dependency tree npm ERR! command failed Errors

Question

I downloaded syncFusion demo angular app and at the terminal, I typed in npm install but I am getting the following errors

PS C:\Projects\synchFusion\ej2-angular-samples-master> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree     
npm ERR!
npm ERR! While resolving: ej2-angular-samples@20.1.47   
npm ERR! Found: @angular/core@10.0.14
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"~10.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"6.1.10" from @angular/http@6.1.10
npm ERR! node_modules/@angular/http
npm ERR!   @angular/http@"^6.1.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\johnc\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\johnc\AppData\Local\npm-cache\_logs\2022-06-21T22_05_19_797Z-debug-0.log

I also tried npm install --force, --legacy-peer-deps and npm config set legacy-peer-deps true with npm install but I get the following error with tons of deprecated warnings

@syncfusion/ej2-documenteditor: timing reifyNode:node_modules/browser-sync-client/node_modules/typescript Completed in 12482[##################] - reify:@syncfusion/ej2-documenteditor: timing reifyNode:node_modules/browser-sync-client/node_modules/typescript Completed in 12482[##################] - reify:@syncfusion/ej2-documenteditor: timing reifyNode:node_modules/browser-sync-client/node_modules/typescript Completed in 12482npm ERR! code 1
npm ERR! path C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\Projects\\synchFusion\\ej2-angular-samples-master\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.15.1 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python C:\Python310\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Python310\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:398:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:527:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1092:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Windows_NT 10.0.19042
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Projects\\synchFusion\\ej2-angular-samples-master\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Projects\synchFusion\ej2-angular-samples-master\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.15.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\johnc\AppData\Local\npm-cache\_logs\2022-06-21T22_06_59_866Z-debug-0.log

I read similiar posts here and tried deleting the package-lock.json and node_modules. So far I had no luck. I tried finding other posts but not found another solution to tried out.

My node (v16.15.1) and npm () version is

{
  'ej2-angular-samples': '20.1.47',
  npm: '8.3.2',
  node: '16.15.1',
  v8: '9.4.146.24-node.21',
  uv: '1.43.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '93',
  nghttp2: '1.47.0',
  napi: '8',
  llhttp: '6.0.4',
  openssl: '1.1.1o+quic',
  cldr: '40.0',
  icu: '70.1',
  tz: '2021a3',
  unicode: '14.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

Here is the package.json. I delete the gulp-sass and it build but npm run start did not work. Not sure what is wrong with this demo app on github

{
  "name": "ej2-angular-samples",
  "version": "20.1.47",
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.0",
    "@angular/common": "~10.0.0",
    "@angular/compiler": "~10.0.0",
    "@angular/core": "~10.0.0",
    "@angular/forms": "~10.0.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "~10.0.0",
    "@angular/platform-browser-dynamic": "~10.0.0",
    "@angular/router": "~10.0.0",
    "@microsoft/signalr": "5.0.9",
    "@syncfusion/ej2": "*",
    "@syncfusion/ej2-angular-barcode-generator": "*",
    "@syncfusion/ej2-angular-base": "*",
    "@syncfusion/ej2-angular-buttons": "*",
    "@syncfusion/ej2-angular-calendars": "*",
    "@syncfusion/ej2-angular-charts": "*",
    "@syncfusion/ej2-angular-circulargauge": "*",
    "@syncfusion/ej2-angular-diagrams": "*",
    "@syncfusion/ej2-angular-documenteditor": "*",
    "@syncfusion/ej2-angular-dropdowns": "*",
    "@syncfusion/ej2-angular-filemanager": "*",
    "@syncfusion/ej2-angular-gantt": "*",
    "@syncfusion/ej2-angular-grids": "*",
    "@syncfusion/ej2-angular-heatmap": "*",
    "@syncfusion/ej2-angular-inplace-editor": "*",
    "@syncfusion/ej2-angular-inputs": "*",
    "@syncfusion/ej2-angular-kanban": "*",
    "@syncfusion/ej2-angular-layouts": "*",
    "@syncfusion/ej2-angular-lineargauge": "*",
    "@syncfusion/ej2-angular-lists": "*",
    "@syncfusion/ej2-angular-maps": "*",
    "@syncfusion/ej2-angular-navigations": "*",
    "@syncfusion/ej2-angular-notifications": "*",
    "@syncfusion/ej2-angular-pdfviewer": "*",
    "@syncfusion/ej2-angular-pivotview": "*",
    "@syncfusion/ej2-angular-popups": "*",
    "@syncfusion/ej2-angular-progressbar": "*",
    "@syncfusion/ej2-angular-querybuilder": "*",
    "@syncfusion/ej2-angular-richtexteditor": "*",
    "@syncfusion/ej2-angular-schedule": "*",
    "@syncfusion/ej2-angular-splitbuttons": "*",
    "@syncfusion/ej2-angular-spreadsheet": "*",
    "@syncfusion/ej2-angular-treegrid": "*",
    "@syncfusion/ej2-angular-treemap": "*",
    "@syncfusion/ej2-react-notifications": "*",
    "@types/codemirror": "0.0.56",
    "@types/marked": "^0.3.0",
    "@types/node": "12.12.25",
    "browser-sync": "2.11.2",
    "cheerio": "^1.0.0-rc.1",
    "codemirror": "^5.37.0",
    "crossroads": "^0.12.2",
    "elasticlunr": "0.9.5",
    "es6-promise": "3.2.1",
    "fuse.js": "^3.2.0",
    "ghooks": "^1.2.1",
    "glob": "^7.0.5",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-gzip": "^1.4.0",
    "gulp-jscpd": "0.0.7",
    "gulp-jshint": "^2.0.1",
    "gulp-jshint-xml-file-reporter": "^0.5.1",
    "gulp-jsoncombine": "^1.0.3",
    "gulp-print": "^2.0.1",
    "gulp-protractor": "^4.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-s3-upload": "1.6.6",
    "gulp-sass": "^3.1.0",
    "gulp-sass-lint": "^1.1.1",
    "gulp-tslint": "^7.0.1",
    "gulp-typescript": "^2.13.0",
    "gulp-uglify": "^2.0.0",
    "gulp-webpack": "^1.5.0",
    "gulp-zip": "^4.0.0",
    "hasher": "^1.2.0",
    "htmllint": "^0.6.0",
    "increase-memory-limit": "^1.0.7",
    "jasmine-ajax": "^3.2.0",
    "jasmine-core": "^2.3.4",
    "jshint": "^2.9.2",
    "karma": "^0.13.2",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^0.5.5",
    "karma-firefox-launcher": "^0.1.7",
    "karma-generic-preprocessor": "^1.1.0",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-jasmine": "^0.3.6",
    "karma-jasmine-ajax": "^0.1.13",
    "karma-requirejs": "^0.2.6",
    "markdown-it": "^8.4.0",
    "marked": "^0.3.19",
    "moment-timezone": "^0.5.14",
    "primeng": "^10.0.0",
    "require-dir": "^0.3.2",
    "requirejs": "^2.2.0",
    "rimraf": "^2.6.1",
    "run-sequence": "^1.0.2",
    "rxjs": "~6.5.5",
    "shelljs": "^0.7.0",
    "simple-git": "^1.43.0",
    "tributejs": "^3.7.3",
    "ts-loader": "^5.3.0",
    "tslib": "^2.0.0",
    "tslint-microsoft-contrib": "^4.0.0",
    "typo-js": "^1.0.1",
    "uglifyjs-webpack-plugin": "*",
    "webpack": "^4.16.1",
    "webpack-cli": "*",
    "webpack-stream": "^5.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.0",
    "@angular/cli": "~10.0.0",
    "@angular/compiler-cli": "~10.0.0",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0-next.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "3.9.6"
  },
  "scripts": {
    "start": "node --max-old-space-size=4096 ./node_modules/@angular/cli/bin/ng serve",
    "start:prod": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng serve --prod",
    "build:prod": "node --max-old-space-size=8192 ./node_modules/@angular/cli/bin/ng build --prod --aot --source-map=false --vendor-chunk=true --output-hashing none",
    "build:dev": "ng build --source-map=false",
    "test": "ng test",
    "lint": "ng lint",
    "ship-source": "gulp styles-replace && gulp copy-source"
  }
}

Any help is appreciated. Thanks in advance.

Answer 1

Try:

1. npm cache clear --force
2. npm install