Could not resolve dependency: npm ERR! peer @angular/compiler@"11.2.8"

Question

I am trying to get my app to deploy on Heroku. I was getting the "sh: 1: ng: not found" error but based on responses on here, I moved my @angular/cli, @angular-devkit/build-angular, @angular/compiler-cli, and typescript. Now I am getting a "Could not resolve dependency: npm ERR! peer @angular/compiler@"11.2.8"" error. I think it is having a versioning issue? I'm not sure what is going on.

I've tried running 'npm update' and tried manually inserting the '@angular/compiler@"11.2.8"' to dependencies and then running 'npm i' but both give me this same error.

Here is my error:

npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/compiler
npm ERR!   @angular/compiler@"~11.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"11.2.8" from @angular/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"^11.0.9" from the root project
npm ERR!   peer @angular/compiler-cli@"^11.0.0" from @angular-devkit/[email protected]
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     @angular-devkit/build-angular@"~0.1100.2" from the root project

Package.json:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "~0.1100.2",
    "@angular/animations": "~11.0.1",
    "@angular/cdk": "^11.2.6",
    "@angular/cli": "~11.0.2",
    "@angular/common": "~11.0.1",
    "@angular/compiler": "~11.0.1",
    "@angular/core": "~11.0.1",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "~11.0.1",
    "@angular/material": "^11.2.6",
    "@angular/platform-browser": "~11.0.1",
    "@angular/platform-browser-dynamic": "~11.0.1",
    "@angular/router": "~11.0.1",
    "angular-in-memory-web-api": "^0.11.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "typescript": "~4.0.2",
    "uuid": "^3.4.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.2",
    "@angular/cli": "~11.0.2",
    "@angular/compiler-cli": "^11.0.9",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }

How does one resolve this error?

Meditation

Answer 1

In addition to using the npm install --save --legacy-peer-deps command line option, this can also be set more permanently as a config option: npm config set legacy-peer-deps true.

If above approach does not work try removing the node_modules folder and package-lock.json file and run command npm install.

Neill

the npm install --save --legacy-peer-deps command gave me an "Error: Error on worker #1: TypeError: compiler_1.devOnlyGuardedExpression is not a function" do you know what that means? – Meditation

I tried the second command and then deleting the node_modules/package-lock.json and I think the compiler versioning issue is fixed! Thank you!! Unfortunately now the ng not found issue is back... I'll do more research on that – Meditation

I had a quite similar problem and the 2nd method did the trick for me. – Lens

@Salahuddin Ahmad , Thank you the first solution worked with me! – Alurd

Delete node_modules and package-lock.json then run command npm install will work :) – Metaphrase

needed to run npx npm-check-updates -u before npm i personally. Hope that helps anyone floundering like I was XD. – Boardinghouse

Answer 2

Sound like a problem with Peer Dependencies try with npm install --legacy-peer-deps.

Supernormal

That gave me a "Error: Error on worker #1: TypeError: compiler_1.devOnlyGuardedExpression is not a function" error – Meditation

Answer 3

Per the npm CLI config docs:

Use of legacy-peer-deps is not recommended, as it will not enforce the peerDependencies contract that meta-dependencies may rely on.

In an attempt to try to follow npm's recommendations, instead of setting --legacy-peer-deps I checked the package-lock.json and noticed that the devDependencies (for Angular-related packages) were still referencing the older version (in my case 13.0.1, upgrading to 13.2.0).

I simply deleted the package-lock.json and ran npm install and it installed the updates that ng update @angular/cli @angular/core had made (to package.json).

Deleting node_modules was also not necessary.

Beauvoir

Answer 4

You may be using a newer version of node. I got this using node 17. I rolled node back to 14 (the version used in the project originally) and npm installed fine.

I recommend using NVM in the future. You can add a .nvm file to you project so you can lock in the node version to use.

Brilliant

Downgrading node is not a solution, and will weaken your security profile – Raki

Answer 5

For people facing issues with more recent @angular upgrades, this was a helpful process:

1. Run one of these: (option 1):npm install --save --legacy-peer-deps (option 2) - permanent config option: npm config set legacy-peer-deps true
2. Remove node_modules folder and package-lock.json file
3. Run: npx npm-check-updates -u
4. Run: npm install

The one extra step that helps in this process is step 3: npx npm-check-updates -u. This helps update your package.json to add all the latest versions so you're up to date and your npm i runs without issues.

Boardinghouse

Answer 6

None of the above solutions worked for me. Here's a my workaround.

1. Take a copy of src folder.
2. Delete the angular project and create a new one.
3. Replace the old src with the new one.
4. Install the dependencies.

It's kind of a fresh install but with the version you desire.

Verified

I think first we can install dependencies and then paste src. – Krystynakshatriya

Answer 7

Use this command with your desired plugin intsall.

In my case it was ngx-scrollbar plugin. So, finally command will be:

npm install ngx-scrollbar --save --legacy-peer-deps

Bladdernose

Answer 8

Tried all solutions mentioned above but nothing worked for me. Uninstalled and installed node again -> npm install. guess what? it worked. :)

Gaddis

Answer 9

Using the right version of node fixed the issue for me. Check the node version to use for your Angular version https://angular.io/guide/versions

Then use node version using nvm. example :

nvm use 16.10.0

Bowyer

Answer 10

The reason for this issue is the node version mismatch between the local working system and the Cloudflare's default node version. If both has major difference then this issue occurs.

Possible fix is adding a new Environment Variable NODE_VERSION under Settings -> Environment Variables. Add the version number from your working setup and that will solve the issue.

Vice versa application can also be upgraded to support latest version but above one will be the quick fix.

Slipover

Answer 11

On my side I had to ensure that I had the correct node version of node when installing my node_modules. Ideally you can use nvm to manage your node versions.

Risser