904

After updating to Angular 6.0.1, I get the following error on ng serve:

Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
Error: Could not find module "@angular-devkit/build-angular" from "/home/Projects/myProjectName".
    at Object.resolve (/home/Projects/myProjectName/node_modules/@angular-devkit/core/node/resolve.js:141:11)
    at Observable.rxjs_1.Observable [as _subscribe] (/home/Projects/myProjectName/node_modules/@angular-devkit/architect/src/architect.js:132:40)

ng update says everything is in order. Deleting the node_modules folder and a fresh npm install install did not help either.

My project is based on ng2-admin (Angular 4 version). Here are my package.json dependencies:

 "dependencies": {
    "@angular/animations": "^6.0.1",
    "@angular/common": "^6.0.1",
    "@angular/compiler": "^6.0.1",
    "@angular/core": "^6.0.1",
    "@angular/forms": "^6.0.1",
    "@angular/http": "^6.0.1",
    "@angular/platform-browser": "^6.0.1",
    "@angular/platform-browser-dynamic": "^6.0.1",
    "@angular/platform-server": "^6.0.1",
    "@angular/router": "^6.0.1",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.26",
    "@ngx-translate/core": "^10.0.1",
    "@ngx-translate/http-loader": "^3.0.1",
    "amcharts3": "github:amcharts/amcharts3",
    "ammap3": "github:amcharts/ammap3",
    "angular-table": "^1.0.4",
    "angular2-csv": "^0.2.5",
    "angular2-datatable": "0.6.0",
    "animate.css": "3.5.2",
    "bootstrap": "4.0.0-alpha.6",
    "bower": "^1.8.4",
    "chart.js": "1.1.1",
    "chartist": "0.10.1",
    "chroma-js": "1.3.3",
    "ckeditor": "4.6.2",
    "core-js": "2.4.1",
    "easy-pie-chart": "2.1.7",
    "font-awesome": "4.7.0",
    "fullcalendar": "3.3.1",
    "google-maps": "3.2.1",
    "ionicons": "2.0.1",
    "jquery": "3.2.1",
    "jquery-slimscroll": "1.3.8",
    "leaflet": "0.7.7",
    "leaflet-map": "0.2.1",
    "lodash": "4.17.4",
    "ng2-ckeditor": "1.1.6",
    "ng2-completer": "^1.6.3",
    "ng2-handsontable": "^2.1.0-rc.3",
    "ng2-slim-loading-bar": "^4.0.0",
    "ng2-smart-table": "^1.0.3",
    "ng2-tree": "2.0.0-alpha.5",
    "ngx-uploader": "4.2.4",
    "normalize.css": "6.0.0",
    "roboto-fontface": "0.7.0",
    "rxjs": "^6.1.0",
    "rxjs-compat": "^6.1.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "^6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@types/fullcalendar": "2.7.40",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "2.0.41",
    "@types/jquery.slimscroll": "1.3.30",
    "@types/lodash": "4.14.61",
    "@types/node": "6.0.69",
    "codelyzer": "3.0.1",
    "gh-pages": "0.12.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "0.2.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "npm-run-all": "4.0.2",
    "protractor": "5.1.0",
    "rimraf": "2.6.1",
    "standard-changelog": "1.0.1",
    "stylelint": "7.10.1",
    "ts-node": "2.1.2",
    "tslint": "5.2.0",
    "tslint-eslint-rules": "4.0.0",
    "tslint-language-service": "0.9.6",
    "typescript": "^2.7.2",
    "typogr": "0.6.6",
    "underscore": "1.8.3",
    "wintersmith": "2.2.5",
    "wintersmith-sassy": "1.1.0"
  }

And my angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng2-admin": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            "styles": [
              "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
              "node_modules/normalize.css/normalize.css",
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/ionicons/scss/ionicons.scss",
              "node_modules/bootstrap/scss/bootstrap.scss",
              "node_modules/leaflet/dist/leaflet.css",
              "node_modules/chartist/dist/chartist.css",
              "node_modules/fullcalendar/dist/fullcalendar.css",
              "node_modules/handsontable/dist/handsontable.full.css",
              "node_modules/ng2-slim-loading-bar/style.css",
              "src/app/theme/theme.scss",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/easy-pie-chart/dist/jquery.easypiechart.js",
              "node_modules/jquery-slimscroll/jquery.slimscroll.js",
              "node_modules/tether/dist/js/tether.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/handsontable/dist/handsontable.full.js",
              "node_modules/chroma-js/chroma.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ng2-admin:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ng2-admin:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ng2-admin:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/easy-pie-chart/dist/jquery.easypiechart.js",
              "node_modules/jquery-slimscroll/jquery.slimscroll.js",
              "node_modules/tether/dist/js/tether.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/handsontable/dist/handsontable.full.js",
              "node_modules/chroma-js/chroma.js"
            ],
            "styles": [
              "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
              "node_modules/normalize.css/normalize.css",
              "node_modules/font-awesome/scss/font-awesome.scss",
              "node_modules/ionicons/scss/ionicons.scss",
              "node_modules/bootstrap/scss/bootstrap.scss",
              "node_modules/leaflet/dist/leaflet.css",
              "node_modules/chartist/dist/chartist.css",
              "node_modules/fullcalendar/dist/fullcalendar.css",
              "node_modules/handsontable/dist/handsontable.full.css",
              "node_modules/ng2-slim-loading-bar/style.css",
              "src/app/theme/theme.scss",
              "src/styles.scss"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": []
          }
        }
      }
    },
    "ng2-admin-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "ng2-admin:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": []
          }
        }
      }
    }
  },
  "defaultProject": "ng2-admin",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}
Improve this question
7
  • I deleted the node_modules and package-lock.json folders and then typed npm i on the command line. After that, everything was fine. Commented Apr 21, 2021 at 12:22
  • sometimes, you might not have node_modules folder at all, maybe fresh clone. run npm install first. Commented May 26, 2021 at 23:22
  • Do you have folder node_modules ? For me the same error happened, when I cloned my Angular project through GitHub on different laptop. I didn't push folder node_modules to save space. Because I was on cell phone tethering, I decided do not reinstall all packages, but copy node_modules folder from different project on the same laptop. And it worked! Commented Sep 8, 2021 at 19:10
  • 3
    So many identical answers to this question. Commented Nov 25, 2021 at 16:45
  • 3
    @SteveSmith I've already flagged a few, but if you notice such answers in the future, you can custom flag them and leave a link to the original answer to get them cleaned up. Commented Dec 14, 2021 at 20:28

50 Answers 50

Reset to default
1
2
2

I had the problem with the newest version of @angular-devkit/build-angular (as of writing this, 11.0.5 was only released 17 hours ago).

Our company is using a Nexus Repository Manager as a npm registry (we do not access https://registry.npmjs.org/ directly). The version was so new, that it wasn't included yet in our Nexus yet.

Invalidating the cache of the repository and npm install fixed the issue.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

From the Ionic forum, this worked for me.

npm i @ionic/angular-toolkit@latest
Improve this answer

1 Comment

this is not an ionic project.
1

Unfortunately, none of the provided solutions worked perfectly for me, but grepit's answer inspired me to do the following steps. I uninstalled Node.js via my OS (Windows 10) and installed it again. Then installed Angular CLI. Then created a new project, and copied my old project's source file into this new one and the error's gone.

Here are the instructions:

  1. Uninstall Node.js via your OS and install it again
  2. npm install -g @angular/cli
  3. Rename your project to YOUR_PROJECT_NAME.old
  4. ng new YOUR_PROJECT_NAME
  5. Run this Hello, World! project (ng serve) to make sure that you won't get the error.
  6. xcopy YOUR_PROJECT_NAME.old\src\*.* YOUR_PROJECT_NAME\src /s

This is the Windows version of copy. Change it based on your own OS.

Improve this answer

Comments

0

Delete package-lock.json and do npm install again. It should fix the issue.

** This fix is more suitable when you have created Angular 6 app using ng new and after installing other dependencies you find this error.

Improve this answer

Comments

0

Try this. It worked for me

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli@next
Improve this answer

Comments

0

I didn't have a package.json. Make sure you have one.

Improve this answer

Comments

0

With the help of the below commands, your application will work as you expected. Run each command as I mention.

  1. npm list -g --depth=0
  2. npm i npm-check-updates
  3. npm install

And finally, run the below command to open your project in the browser:

ng serve --open
Improve this answer

Comments

0

For me, it worked when I ran the npm install command inside the project folder.

Example: I have shoppingmenu app and I ran the npm install command inside that folder.

Improve this answer

Comments

0

This error mostly arises when you don't have Node.js modules in your Angular application.

Developers mostly share Angular applications without the Node.js node_modules folder, because it is very big in size and sharing of applications or uploading takes so much time.

It can be fixed with single command , npm install.

Improve this answer

Comments

0

This was the solution for my case: https://github.com/angular/angular-cli/issues/22603

If there is nothing in the folder node_modules\@angular-devkit you might have the same issue.

The devDependencies are not installed because you have set the Environment variable NODE_ENV to production try development instead.

Restart commandline and run npm install and maybe npm i --only=dev

Improve this answer

Comments

0

Running the following worked for me:

npm audit fix --force

Improve this answer

Comments

0

In my case, the issue was because of missing dependencies. The dependencies were missing, because I had forgotten to call:

npm install

After calling the above command, all required dependencies are loaded in folder node_modules folder, and that isn't an issue any more.

Improve this answer

Comments

0

I tried all the previous answers, but none of them worked for me. I had to downgrade the version of Angular-CLI. I run the command ng --version and results:

@angular-devkit/architect          0.10.7
@angular-devkit/build-angular      0.10.7
@angular-devkit/build-ng-packagr   0.10.7
@angular-devkit/build-optimizer    0.10.7
@angular-devkit/build-webpack      0.10.7
@angular-devkit/core               7.0.7 <-- notice this!
@angular-devkit/schematics         8.2.1
@angular/cli                       8.2.1 <-- and this!
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.0.7
@schematics/angular                8.2.1
@schematics/update                 0.802.1
ng-packagr                         4.7.1
rxjs                               6.3.3
typescript                         3.1.6
webpack                            4.19.1

I open my package.json and search for the line that define the version of CLI:

...
"devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular-devkit/build-ng-packagr": "~0.10.0",
    "@angular/cli": "~8.2.0" -- I changed here to ~7.0.7
...}
...

I change the version of @angular/cli to ~7.0.7. Then run npm uninstall @angular/cli and install again running npm install -g angular-cli@~7.0.7

Improve this answer

Comments

0

I resolved this by installing Angular on a 64-bit operating system. I was getting the error because I was initially running it on a 32-bit OS.

Improve this answer

1 Comment

What operating system? Linux? Windows?
0

After try many ways, it's still not work until i removed my yarn.lock file

Improve this answer

Comments

0 
ng -v :6.0.8
node -v :8.11.2
npm -v :6.1.0

Make sure you are in the folder where angular.json is installed. Get into that and type ng serve. If the issue still arises, then you are having only dependencies installed in folder node_modules. Type the following, and it will work:

npm i --only=dev
Improve this answer

1 Comment

I used ng --version inside the project. It showed me the list with error. So, it means the list didnt had this package installed properly. When I went outside of the app and checked ng --version, so global one didnt even listed it. So, I guess my yarn installtion didnt install the dev dependencies properly
0

I did this:

npm install @angular-devkit/build-angular ng-packagr --save-dev

Notice the space before ng-packagr!

That was the solotion for angular18.

Improve this answer

Comments

-1

npm i OR npm install

then after, re-run the appliaction.

Improve this answer

Comments

-2

I just did the below, and it worked.

npm install --save-dev
Improve this answer

1 Comment

unhelpful comment, try answering why it worked, what was failing, etc.
-5

Your npm version is old. Try to run the following command:

npm i npm@latest -g
Improve this answer

1 Comment

old npm or Node versions does not throw this error "Could not find module “@angular-devkit/build-angular”, the aswear is just install the dependency:npm install --save-dev @angular-devkit/build-angular
1
2

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.