@angular/material dependency conflict

Question

Hi I am starting learning angular with electron. I've forked this repo: https://github.com/maximegris/angular-electron

I can not deal with such dependency issue:

 ✘ daniel@daniel-HP-ZBook-15-G6  ~/repo/angular-electron   master ±  npm install                             
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: qiasphere-status-monitor@1.0.0
npm ERR! Found: @angular/core@12.1.2
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"12.1.2" from the root project
npm ERR!   peer @angular/core@"^11.0.0 || ^12.0.0-0" from @angular/material@11.2.12
npm ERR!   node_modules/@angular/material
npm ERR!     dev @angular/material@"11.2.12" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"12.2.1" from @angular/animations@12.2.1
npm ERR! node_modules/@angular/animations
npm ERR!   peer @angular/animations@"^11.0.0 || ^12.0.0-0" from @angular/material@11.2.12
npm ERR!   node_modules/@angular/material
npm ERR!     dev @angular/material@"11.2.12" 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/daniel/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/daniel/.npm/_logs/2021-08-16T19_21_25_325Z-debug.log
 ✘ daniel@daniel-HP-ZBook-15-G6  ~/repo/angular-electron   master ±  

I've tried different versions, but result always same.

Thanks in advance

npm -v 7.16.0

node -v v16.6.2

ubuntu 20.04

app/package.json

{
  "name": "status-monitor",
  "version": "1.0.0",
  "description": "Status Monitor Tool",
  "main": "main.js",
  "private": true,
  "dependencies": {
    "@electron/remote": "1.2.0"
  }
}

package.json

{
  "name": "status-monitor",
  "version": "1.0.0",
  "keywords": [
    "angular",
    "angular 12",
    "electron",
    "nodejs",
    "typescript",
    "spectron",
    "eslint",
    "sass",
    "windows",
    "mac",
    "linux"
  ],
  "main": "app/main.js",
  "private": true,
  "scripts": {
    "postinstall": "electron-builder install-app-deps",
    "ng": "ng",
    "start": "npm-run-all -p electron:serve ng:serve",
    "build": "npm run electron:serve-tsc && ng build --base-href ./",
    "build:dev": "npm run build -- -c dev",
    "build:prod": "npm run build -- -c production",
    "ng:serve": "ng serve -c web -o",
    "electron:serve-tsc": "tsc -p tsconfig.serve.json",
    "electron:serve": "wait-on tcp:4200 && npm run electron:serve-tsc && npx electron . --serve",
    "electron:local": "npm run build:prod && npx electron .",
    "electron:build": "npm run build:prod && electron-builder build --publish=never",
    "test": "ng test --watch=false",
    "test:watch": "ng test",
    "e2e": "npm run build:prod && cross-env TS_NODE_PROJECT='e2e/tsconfig.e2e.json' mocha --timeout 300000 --require ts-node/register e2e/**/*.e2e.ts",
    "version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
    "lint": "ng lint"
  },
  "dependencies": {
    "@angular/common": "12.1.2",
    "@angular/compiler": "12.1.2",
    "@angular/core": "12.1.2",
    "@angular/forms": "12.1.2",
    "@angular/language-service": "12.1.2",
    "@angular/platform-browser": "12.1.2",
    "@angular/platform-browser-dynamic": "12.1.2",
    "@angular/router": "12.1.2",
    "@electron/remote": "1.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "12.1.0",
    "@angular-devkit/build-angular": "12.1.2",
    "@angular-eslint/builder": "12.3.1",
    "@angular-eslint/eslint-plugin": "12.3.1",
    "@angular-eslint/eslint-plugin-template": "12.3.1",
    "@angular-eslint/schematics": "12.3.1",
    "@angular-eslint/template-parser": "12.3.1",
    "@angular/cli": "12.1.2",
    "@angular/compiler-cli": "12.1.2",
    "@ngx-translate/core": "13.0.0",
    "@ngx-translate/http-loader": "6.0.0",
    "@types/jasmine": "3.8.1",
    "@types/jasminewd2": "2.0.10",
    "@types/mocha": "8.2.3",
    "@types/node": "16.3.3",
    "@typescript-eslint/eslint-plugin": "4.28.3",
    "@typescript-eslint/parser": "4.28.3",
    "chai": "4.3.4",
    "conventional-changelog-cli": "2.1.1",
    "cross-env": "7.0.3",
    "electron": "13.1.7",
    "electron-builder": "22.11.9",
    "electron-reload": "1.5.0",
    "eslint": "7.30.0",
    "eslint-plugin-import": "2.23.4",
    "eslint-plugin-jsdoc": "35.4.3",
    "eslint-plugin-prefer-arrow": "1.2.3",
    "jasmine-core": "3.8.0",
    "jasmine-spec-reporter": "7.0.0",
    "karma": "6.3.4",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-electron": "7.0.0",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.7.0",
    "mocha": "9.0.2",
    "nan": "2.14.2",
    "npm-run-all": "4.1.5",
    "spectron": "15.0.0",
    "ts-node": "10.1.0",
    "typescript": "~4.2.0",
    "wait-on": "5.0.1",
    "webdriver-manager": "12.1.8"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "browserslist": [
    "chrome 91"
  ]
}

I have forked this repo: https://github.com/maximegris/angular-electron

Answer 1

This is due to version mismatch. Your @angular/core is 12.x. But @angular/material is 11.x. Try updating angular material