15

I have taken checkout of angular project and trying to run ng serve with this command I am getting the following error.

 An unhandled exception occurred: Cannot find module '@angular/compiler-cli'
Require stack:
- D:\PMSAngularProj\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js
- D:\PMSAngularProj\node_modules\@ngtools\webpack\src\index.js
- D:\PMSAngularProj\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\typescript.js
- D:\PMSAngularProj\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\index.js
- D:\PMSAngularProj\node_modules\@angular-devkit\build-angular\src\browser\index.js
- D:\PMSAngularProj\node_modules\@angular-devkit\build-angular\src\dev-server\index.js
- C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js   
- C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\index.js
- C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\models\architect-command.js
- C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\commands\serve-impl.js
- C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\export-ref.js
- C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\index.js
- C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\utilities\json-schema.js
- C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\models\command-runner.js
- C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js
- C:\Users\user\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
See "C:\Users\user\AppData\Local\Temp\ng-6M2aBm\angular-errors.log" for further details.

package.json

{
  "name": "ng-pi-admin",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --base-href ./",
    "build:prod": "ng build --prod --base-href ./",
    "build:ci": "ng build --prod --base-href ./",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.10",
    "@angular/common": "^7.2.10",
    "@angular/compiler": "^7.2.10",
    "@angular/core": "^7.2.10",
    "@angular/forms": "^7.2.10",
    "@angular/http": "^7.2.10",
    "@angular/platform-browser": "^7.2.10",
    "@angular/platform-browser-dynamic": "^7.2.10",
    "@angular/router": "^7.2.10",
    "angular-froala-wysiwyg": "^2.9.3",
    "animate.css": "^3.5.2",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.4",
    "echarts": "^3.8.5",
    "font-awesome": "^4.7.0",
    "fontface-source-sans-pro": "^2.0.10-alpha1",
    "jquery": "^3.2.1",
    "ng2-file-upload": "^1.3.0",
    "ng2-select": "^2.0.0",
    "ngx-echarts": "^2.0.0",
    "ngx-modal": "^0.0.29",
    "ngx-pagination": "^3.0.3",
    "node-sass": "^4.12.0",
    "normalize.css": "^7.0.0",
    "pell": "^1.0.4",
    "roboto-fontface": "^0.8.0",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.0.0-rc.0",
    "sweetalert2": "^7.6.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1001.1",
    "@angular/cli": "^10.1.1",
    "@angular/compiler-cli": "^7.2.10",
    "@angular/language-service": "^7.2.10",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.2.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

I have tried to resolve by executing npm i @angular/compiler-cli command,

it has given me output like below

+ @angular/[email protected]
added 1593 packages from 1243 contributors and audited 1603 packages in 317.518s

62 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

after that I tried to execute ng serve still getting the same error like

An unhandled exception occurred: Cannot find module '@angular/compiler-cli/src/tooling' Require stack:

5
  • 1
    Have you tried to delete node_modules and do "npm install"? Commented Sep 11, 2020 at 6:05
  • yes I tried with deleting and npm install Commented Sep 11, 2020 at 6:06
  • You may need the webpack: npmjs.com/package/webpack Commented Sep 11, 2020 at 6:11
  • @CirrusMinor after installation of npm install --save-dev webpack also same error Commented Sep 11, 2020 at 6:27
  • 3
    I suppose it's a version mismatch between angular and angular/cli. Have you updated angular/cli alone? Commented Sep 11, 2020 at 6:34

2 Answers 2

32

it is version mismatch, just update all dependencies with npm-check-updates

npm i -g npm-check-updates
ncu -u
npm install
Sign up to request clarification or add additional context in comments.

1 Comment

Just to add to this answer. I had to delete package.lock.json, delete node_modules, and run the command npm cache clean --force. When I tried the above without the steps I have listed, it kept referencing old versions of packages that I thought were updated in the update, and came back with dependency issues.
-6

Run the

npm install

before you run

ng serve

you need to use sudo access, in some terminals.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.