[BUG] Broken package-lock/node_modules with missing/extraneous dependency

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

A freshly installed package.json contains missing and extraneous dependencies.

npm ERR! code ELSPROBLEMS
npm ERR! extraneous: @typescript-eslint/types@4.16.1 /Users/mshima/aplicacoes/bug-tracker/node_modules/@typescript-eslint/types
npm ERR! extraneous: @typescript-eslint/typescript-estree@4.16.1 /Users/mshima/aplicacoes/bug-tracker/node_modules/@typescript-eslint/typescript-estree
npm ERR! missing: jest-preset-angular@^8.4.0, required by @angular-builders/jest@11.1.1
npm ERR! missing: @typescript-eslint/experimental-utils@4.16.1, required by @angular-eslint/eslint-plugin@4.3.0
npm ERR! missing: @typescript-eslint/experimental-utils@4.24.0, required by @typescript-eslint/eslint-plugin@4.24.0
npm ERR! extraneous: @typescript-eslint/visitor-keys@4.16.1 /Users/mshima/aplicacoes/bug-tracker/node_modules/@typescript-eslint/typescript-estree/node_modules/@typescript-eslint/visitor-keys

A second npm install removes the extraneous dependencies, but don't add missing dependencies.

Expected Behavior

No response

Steps To Reproduce

1. With this package.json:

{
  "dependencies": {
    "@angular/common": "11.2.13",
    "@angular/compiler": "11.2.13",
    "@angular/core": "11.2.13",
    "@angular/forms": "11.2.13",
    "@angular/localize": "11.2.13",
    "@angular/platform-browser": "11.2.13",
    "@angular/platform-browser-dynamic": "11.2.13",
    "@angular/router": "11.2.13",
    "@fortawesome/angular-fontawesome": "0.8.2",
    "@fortawesome/fontawesome-svg-core": "1.2.35",
    "@fortawesome/free-solid-svg-icons": "5.15.3",
    "@ng-bootstrap/ng-bootstrap": "9.1.1",
    "@ngx-translate/core": "13.0.0",
    "@ngx-translate/http-loader": "6.0.0",
    "bootstrap": "4.6.0",
    "dayjs": "1.10.4",
    "ngx-infinite-scroll": "10.0.1",
    "ngx-webstorage": "7.0.1",
    "rxjs": "6.6.7",
    "swagger-ui-dist": "3.48.0",
    "tslib": "2.2.0",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "11.1.1",
    "@angular-builders/jest": "11.1.1",
    "@angular-eslint/eslint-plugin": "4.3.0",
    "@angular/cli": "11.2.12",
    "@angular/compiler-cli": "11.2.13",
    "@angular/service-worker": "11.2.13",
    "@types/jest": "26.0.23",
    "@types/node": "15.3.0",
    "@typescript-eslint/eslint-plugin": "4.24.0",
    "@typescript-eslint/parser": "4.24.0",
    "browser-sync": "2.26.14",
    "browser-sync-webpack-plugin": "2.3.0",
    "concurrently": "6.1.0",
    "copy-webpack-plugin": "6.4.1",
    "cypress": "6.6.0",
    "cypress-audit": "0.3.0",
    "eslint": "7.26.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-cypress": "2.11.3",
    "eslint-webpack-plugin": "2.5.4",
    "friendly-errors-webpack-plugin": "1.7.0",
    "husky": "4.3.8",
    "jest": "26.6.3",
    "jest-date-mock": "1.0.8",
    "jest-junit": "12.0.0",
    "jest-sonar-reporter": "2.0.0",
    "lighthouse": "7.5.0",
    "lint-staged": "11.0.0",
    "merge-jsons-webpack-plugin": "1.0.21",
    "prettier": "2.3.0",
    "prettier-plugin-java": "1.0.2",
    "prettier-plugin-packagejson": "2.2.11",
    "rimraf": "3.0.2",
    "simple-progress-webpack-plugin": "2.0.0",
    "typescript": "4.1.5",
    "wait-on": "5.3.0",
    "webpack": "4.46.0",
    "webpack-bundle-analyzer": "4.4.2",
    "webpack-merge": "5.7.3",
    "webpack-notifier": "1.13.0"
  },
  "engines": {
    "node": ">=14.16.0"
  }
}

3. Run 'npm install'
4. Run 'npm ls --depth 10'

npm ERR! code ELSPROBLEMS
npm ERR! extraneous: @typescript-eslint/types@4.16.1 /Users/mshima/aplicacoes/bug-tracker/node_modules/@typescript-eslint/types
npm ERR! extraneous: @typescript-eslint/typescript-estree@4.16.1 /Users/mshima/aplicacoes/bug-tracker/node_modules/@typescript-eslint/typescript-estree
npm ERR! missing: jest-preset-angular@^8.4.0, required by @angular-builders/jest@11.1.1
npm ERR! missing: @typescript-eslint/experimental-utils@4.16.1, required by @angular-eslint/eslint-plugin@4.3.0
npm ERR! missing: @typescript-eslint/experimental-utils@4.24.0, required by @typescript-eslint/eslint-plugin@4.24.0
npm ERR! extraneous: @typescript-eslint/visitor-keys@4.16.1 /Users/mshima/aplicacoes/bug-tracker/node_modules/@typescript-eslint/typescript-estree/node_modules/@typescript-eslint/visitor-keys

5. Run npm install

removed 3 packages, and audited 2284 packages in 3s

6. Run 'npm ls --depth 10'

npm ERR! code ELSPROBLEMS
npm ERR! missing: jest-preset-angular@^8.4.0, required by @angular-builders/jest@11.1.1
npm ERR! missing: @typescript-eslint/experimental-utils@4.16.1, required by @angular-eslint/eslint-plugin@4.3.0
npm ERR! missing: @typescript-eslint/experimental-utils@4.24.0, required by @typescript-eslint/eslint-plugin@4.24.0

Environment

• OS: MacOS Big Sur (Apple Silicon)
• Node: v14.16.1
• npm: 7.13.0

Reproduce the dependency tree from the supplied package.json with Node v14.16.1 and npm 7.13.0 by running npm install and npm ls --depth 10. Compare the first and second install results, then determine the expected dependency tree and verify that npm install leaves no missing or extraneous dependencies.