Cannot resolve type entity i20.CdkScrollableModule to symbol nx workspace

Question

So I have reserached over the internet about this type of issue and still found no solution.

I have tried to delete node_module, deleted package-lock.json, updated all dependecies and even executed nx migrate.

There is no two node_modules what I have seen and search for in my workspace project

npm install works successfully but once I run nx serve command I get this following error:

./apps/app name/src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Cannot resolve type entity i20.CdkScrollableModule to symbol at \node_modules@ngtools\webpack\src\ivy\loader.js:77:18 at processTicksAndRejections (internal/process/task_queues.js:93:5)

./apps/app name/src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Cannot resolve type entity i20.CdkScrollableModule to symbol at \node_modules@ngtools\webpack\src\ivy\loader.js:77:18 at processTicksAndRejections (internal/process/task_queues.js:93:5)

Package.json:

{
  "name": "nx-test",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "nx",
    "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser 
     module main",
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/localize": "~13.2.0",
    "@angular/material": "^13.3.2",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@nrwl/angular": "13.9.6",
    "angular-material": "^1.2.4",
    "bootstrap": "^5.1.3",
    "ng-packagr": "^13.3.0",
    "rxjs": "~7.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.0",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "~13.2.0",
    "@angular/compiler-cli": "~13.2.0",
    "@angular/language-service": "~13.2.0",
    "@nrwl/cli": "13.9.6",
    "@nrwl/cypress": "13.9.6",
    "@nrwl/eslint-plugin-nx": "13.9.6",
    "@nrwl/jest": "13.9.6",
    "@nrwl/linter": "13.9.6",
    "@nrwl/workspace": "13.9.6",
    "@types/jest": "27.0.2",
    "@types/node": "16.11.7",
    "@typescript-eslint/eslint-plugin": "~5.10.0",
    "@typescript-eslint/parser": "~5.10.0",
    "cypress": "^9.1.0",
    "eslint": "~8.7.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "27.2.3",
    "jest-preset-angular": "11.1.1",
    "nx": "13.9.6",
    "postcss": "^8.4.5",
    "postcss-import": "^14.0.2",
    "postcss-preset-env": "^6.7.0",
    "postcss-url": "^10.1.1",
    "prettier": "^2.5.1",
    "ts-jest": "27.0.5",
    "typescript": "~4.5.2"
  }
}

Answer 1

I received a similar error in Nx workspaces with Angular 14:

./apps/simple-examples/src/main.ts - Error: Module build failed 
(from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot resolve type entity i12.PortalModule to symbol
    at C:\MyDirectory\Angular.Examples.MonoRepo\Client\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

The only thing that I found that helped was updating to the latest version of Angular.

I did find a blog post that suggested that all you needed to do was update @angular/core and @angular/cli; however, I figured if I'm going to update, I'll just updating everything to highest version of Angular 14.