Angular 6 - Could not find module "@angular-devkit/build-angular"
Asked Answered
D

49

893

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"
    }
  }
}
Definite answered 14/5, 2018 at 14:38 Comment(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.Electrodialysis
sometimes, you might not have node_modules folder at all, maybe fresh clone. run npm install first.Unbearable
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!Polky
So many identical answers to this question.Tetrabasic
@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.Bumptious
Hey everyone, if the below answers didn't work even after deleting npm_modules and reinstalling, try deleting package-lock.json and try npm install again. I ran into similar issue once and deleting package-lock.json and doing npm install worked for me back then. Hope this helps.Ingemar
This one worked for me - https://mcmap.net/q/53492/-angular-6-could-not-find-module-quot-angular-devkit-build-angular-quotIncubus
F
1347

Install @angular-devkit/build-angular as dev dependency. This package is newly introduced in Angular 6.0

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

or,

yarn add @angular-devkit/build-angular --dev
Function answered 14/5, 2018 at 14:44 Comment(17)
Exact same error? And the configuration file? are they same as this question?Function
Yes. Well, I did some more exploring on this issue. Turns out that it works fine on my Mac Mini, so it will probably has something to do with my Node setup on Windows.Backlog
Then try to delete node_module folder & clean cache & install againFunction
Try to delete node_module & npm cache... @AmritaSrivastavaFunction
hugo der hungrige here said: 1. Update all dependencies and make sure the app itself works as intented 2. Replace every occurrence of @angular/cli with @angular-devkit/build-angular in the karma.conf.js 3. Removing the files and the preprocessor configs from the karma.conf.js completely. This is all defined in the angular.json and should be handled automatically by the @angular-devkit karma plugin. Doing #3 worked for meAutotrophic
Upgrade to angular 7 - the accepted answer fixed the error (have upvoted), but didn't solve the upgrade problem overall. This did https://mcmap.net/q/54736/-cannot-find-module-39-webpack-39-angularMalevolent
Thanks for this. I just hit this problem while attempting to follow the Angular tutorial: angular.io/guide/quickstart - seems like someone forgot to update the documentation?Occurrence
I don't know why its called devkit if we still need it on prod?Conclave
This command is only making the situation bad by removing the angular devkitWoodson
I had to run in adicional the following command: "npm audit fix --force"Unhandy
Seems wonky that I have to execute this command every time I clear out node_modules/.Millimicron
just try yarn or npm installRowley
This solution not work for me. if any other solution please updateCompte
Question though: if my package.json mentioned it needs this package as a dev dependency, why wouldn't NPM fetch it for me, transitively? Seems like a bad UX to me.Jacksmelt
This issue might occur some times due to restricted environment also. check with IT team for angular repo setup internal. Most of the banking services companies will not accept public artifactories.Kemme
Same error. Bad answer.Balmacaan
I ran with this command: npm install --save-dev @angular-devkit/build-angular --forcePrinz
C
284
npm update

It worked like a charm.

Catenate answered 29/7, 2018 at 15:47 Comment(5)
I moved to a new machine halfway through the angular-tour-of-heroes tutorial and pulled the half baked work from source control. This fixed it.Allocation
Nothing "half baked" about not checking in the node modules folder. This simply rebuilds your node modules based on your package.json. This is perfectly normal thing to do when you check out a new solution.Bereniceberenson
There might be additional packages that are outdated. Run ng update --all to try to update all at the same time.Amygdalin
after i cloned my project in another machine i was having this issue, and this solution worked perfectly, thanksSowder
this should be the accepted answer.Squall
I
138

For Angular 6 and above, the working solution for me was:

npm install

ng update

And finally

npm update

Inapprehensive answered 7/11, 2018 at 13:42 Comment(3)
When I do the ng update I got several messages about several specific updates needed. Name Version Command to update -------------------------------------------------------------------------------- @angular/core 4.4.7 -> 8.2.4 ng update @angular/core @ngrx/store 2.2.3 -> 8.3.0 ng update @ngrx/store rxjs 5.5.12 -> 6.5.3 ng update rxjsStricker
npm i only without ng update and npm upsdate worked for me (Angular 12). Anyway thank you so much!Marsh
noo doesnt workBalmacaan
S
36

We need to explicitly get devDependencies.

npm i --only=dev
Shechem answered 10/8, 2018 at 4:16 Comment(1)
This worked for me, same answer in: github.com/angular/angular-cli/issues/…Radicel
C
24

Please follow these five steps. It's definitely worked (my personal experience)

Step 1: npm uninstall -g @angular/cli

Step 2: npm cache clean --force

Step 3: npm install -g @angular/cli@latest

Step 4: npm i

Step 5: ng build

After that, ng serve.

Cistercian answered 6/6, 2020 at 7:46 Comment(1)
open in browser type cmd: ng servre --oCistercian
D
22

If the following command does not work,

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

then move to the project folder and run this command:

npm install --save @angular-devkit/build-angular
Disappointment answered 20/5, 2018 at 6:58 Comment(1)
npm install --save @angular-devkit/build-angular worked for me but only problem was I was trying to run this command from a command prompt which was not run as an administrator, and I entered to execute this command it was not showing any error nothing only cursor was on wait state then I simply run a cmd with admin in it worked. ThanksPresa
Y
20

I fixed mine by:

  1. Delete node_modules folder.

  2. run npm install

Yachtsman answered 5/3, 2020 at 7:28 Comment(0)
T
15

All of the previous answers are correct, but they did not work for me. The only way I was able to make this work was by the following steps/commands:

npm uninstall -g @angular/[email protected]
npm cache clean --force
npm install -g @angular/cli@latest
npm install node-sass -g
ng new MY_PROJECT_NAME
cp -r from_my_old_project to_new_MY_PROJECT_NAME
Thine answered 30/6, 2018 at 6:11 Comment(2)
If you are trying to build a library, use ng new MY_PROJECT_NAME --create-application=false for the second-to-last command. I had this error on trying to build a library. The --create-application=false flag avoids pulling in unnecessary dependencies. (angular.io/guide/creating-libraries#getting-started)Kawasaki
worked for me after clearing the npm cache and installing againStewardson
M
11

For Angular 8

Install npm-check-updates package

Run:

$ npm i npm-check-updates
$ ncu -u
$ npm install

This package will update all packages and resolve this issue

Notice: After update If you face this issue:

ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 3.6.3 was found instead.

then run:

$ npm install [email protected]

Source Link

Mikimikihisa answered 16/9, 2019 at 9:34 Comment(1)
'ncu' is not recognized as an internal or external command, operable program or batch file.Grabowski
V
9

npm install

Just type npm install and run. Then the project will run without errors.

Or you can use npm install --save-dev @angular-devkit/build-angular.

Vermicelli answered 1/9, 2018 at 8:52 Comment(0)
G
9

Try this one.

npm install

npm update

If it shows something like this,

Run npm audit fix to fix them, or npm audit for details

Do that!

Gadolinite answered 13/9, 2018 at 1:46 Comment(3)
And when you do that, NPM says 'I sure hope you know what you are doing.'. That gave me the freaks.Azarcon
upvoted since it helped - although only partially. After doing this I still had some missing peer dependencies which I install following this idea: https://mcmap.net/q/54737/-how-to-install-npm-peer-dependencies-automaticallyBump
Are you quoting something? If so, what is the source?Butyrin
K
8

The following worked for me. Nothing else did, unfortunately.

npm uninstall @angular-devkit/build-angular
npm install @angular-devkit/build-angular
ng update --all --allow-dirty --force
Keef answered 7/9, 2019 at 14:33 Comment(2)
I had a message saying --allow-dirty not installed. But updated my stuff.Southland
Why does it work? An explanation would be in order. E.g., what is the idea/gist? From the Help Center: "...always explain why the solution you're presenting is appropriate and how it works". Please respond by editing (changing) your answer, not here in comments (*** *** *** *** *** without *** *** *** *** *** "Edit:", "Update:", or similar - the answer should appear as if it was written today).Butyrin
S
7

The following commands works:

npm install
ng update

You may see the message "We analyzed your package.json and everything seems to be in order. Good work!"

npm update

Then try a development build:

ng build

I got the error with TypeScript and downgraded to:

npm install typescript@">=3.1.1 <3.2

ng build --prod

All success with a production build.

Below is the working combination:

ng --version

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.0
@angular-devkit/build-angular     0.11.0
@angular-devkit/build-optimizer   0.11.0
@angular-devkit/build-webpack     0.11.0
@angular-devkit/core              7.1.0
@angular-devkit/schematics        7.1.0
@angular/cli                      7.1.0
@ngtools/webpack                  7.1.0
@schematics/angular               7.1.0
@schematics/update                0.11.0
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1
Symptomatic answered 3/12, 2018 at 16:58 Comment(0)
C
6

A working solution for me:

  1. Delete the node_modules folder.

  2. Run npm install

Coastward answered 23/3, 2021 at 18:34 Comment(0)
D
5
npm install --save-dev @angular-devkit/build-angular@latest

solved it for me.

Devaluate answered 19/6, 2019 at 19:47 Comment(0)
Y
5

First delete node_modules folder

then Restart system

Run npm install --save-dev @angular-devkit/build-angular

and

Run npm install

Yoheaveho answered 26/9, 2019 at 9:0 Comment(0)
J
4

When we run commands like ng serve, it uses the local version of @angular/cli. So first install the latest version of @angular/cli locally (without the -g flag). Then update the cli using the ng update @angular/cli command. I thing this should fix the issue.

Angular Update Guide may help you if you are updating your Angular project.

Jurkoic answered 4/10, 2018 at 6:9 Comment(0)
A
4

This error generally occurred when the Angular project was not configured completely.

This will work

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

npm install
Angelineangelique answered 13/5, 2019 at 7:31 Comment(0)
W
4

Resolve this Error: An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-angular:browser###

Just execute the following command and error was solved

  • ng update @angular/cli @angular/core

  • npm uninstall @angular-devkit/build-angular

  • npm install --save-dev @angular-devkit/build-angular ###if this error could not resolve by above command so you update node version###

  • npm update npm -g

Whim answered 12/7, 2019 at 6:46 Comment(0)
C
4

Use:

npm i --save-dev @angular-devkit/build-angular

This code installs @angular-devkit/build-angular as a development dependency.

It was 100% tested.

Chamfer answered 18/8, 2020 at 20:29 Comment(0)
S
4

Just update the Angular version and add the below dependency:

ng update

npm update

npm i @angular-devkit/build-angular

https://www.npmjs.com/package/@angular-devkit/build-angular

Sexagesimal answered 17/9, 2020 at 10:13 Comment(0)
V
4

I had a library which I created in an older version of Angular.

Now that I upgraded to the latest version 11 the build would fail.

Indeed, the builder has changed.

When doing an ng build I was something a somewhat similar error message:

Cannot find module '@angular-devkit/build-ng-packagr/package.json'

In the angular.json file I had to change the builder property:

"builder": "@angular-devkit/build-ng-packagr:build",

with:

"builder": "@angular-devkit/build-angular:ng-packagr",
Vertex answered 19/11, 2020 at 18:43 Comment(0)
E
4
  1. Go to the folder where you created the angular project and the delete the node_modules folder.

  2. Now open the command prompt and enter in the project which you want to run using cd.

  3. Enter the command

npm i

or

npm install

  1. Now the command prompt will start installing the new node_modules files in the project.

  2. When the node_modules gets installed then, run the project using command

    ng s --o

If the above method did not work, then there is some mismatch of the version in npm and then try to install the node_modules.

npm update

Generally, this method should work if not worked then try to run this command:

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

Details and alternative solution: Could not find module “@angular-devkit/build-angular”.

Estivation answered 9/1, 2022 at 13:35 Comment(0)
P
3

I struggled with the same problem just a minute ago. My project was generated using the version 1.6.0 of angular-cli.

  1. npm update -g @angular/cli

  2. editing my package.json, changing the line

    "@angular/cli": "1.6.0",
    

    to

    "@angular/cli": "^1.6.0",
    
  3. npm update

Palaeography answered 20/12, 2018 at 10:58 Comment(1)
This has nothing to do with not being able to find a module. this just means the angular cli module will be updated for any version 1.6.xSymbolist
G
3

Try this first

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

If some error come again for missing packages try

npm install
Graiae answered 9/5, 2019 at 10:24 Comment(1)
What is it supposed to do? How does it work? What is the idea/gist? From the Help Center: "...always explain why the solution you're presenting is appropriate and how it works". Please respond by editing (changing) your answer, not here in comments (*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** without *** *** *** *** *** *** "Edit:", "Update:", or similar - the answer should appear as if it was written today).Butyrin
M
3

That's works for me, commit and then:

ng update @angular/cli @angular/core
npm install --save-dev @angular/cli@latest
Merchantman answered 30/5, 2019 at 20:46 Comment(0)
I
3

I had the same problem today, after upgrading Node.js from v9 to v10.
My environment is set by Docker and I had to remove this command from the my DockerFile:

npm link @angular/cli

It creates a symbolic link to the directory where Node.js is installed.
I guess the angular/cli module in it do not have the same version as the one in the node_modules directory of my project, and this causes the issue.

Idio answered 4/6, 2019 at 15:48 Comment(0)
N
3

All these answers basically say the same

npm install -D @angular-devkit/build-angular
npm install

But this still may fail if you are in a library project like my-lib which is inside an Angular workspace:

workspace
|-- projects
|    |-- my-lib
|        |-- package.json
|
|-- package.json

In this case, make sure to run npm install not only in the directory workspace/projects/my-lib, but also in workspace directly.

Neckcloth answered 14/7, 2022 at 7:49 Comment(0)
A
2
  • Delete the folder node_modules.
  • Clear the cache using npm cache clean --verify.
  • And then npm install again.

It works like a charm for me.

Azole answered 26/2, 2019 at 12:4 Comment(0)
S
2

I faced the same problem.

Surprisingly, it was just because the version specified in package.json was not in the expected format.

I switched from version "version": "0.1" to "version": "0.0.1" and it solved the problem.

Angular needs semantic versioning (also read Semver) with three parts.

Skyeskyhigh answered 24/8, 2020 at 12:7 Comment(0)
D
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.

Display answered 18/12, 2020 at 9:38 Comment(0)
L
1

I had been facing the same issue for two days.

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
Luxury answered 1/7, 2018 at 13:31 Comment(1)
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 properlyPtarmigan
S
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.

Slapup answered 10/6, 2019 at 7:52 Comment(0)
U
1

From the Ionic forum, this worked for me.

npm i @ionic/angular-toolkit@latest
Ultrafilter answered 4/2, 2021 at 17:12 Comment(1)
this is not an ionic project.Definite
C
0

Running the following worked for me:

npm audit fix --force

Cooker answered 18/8, 2018 at 0:51 Comment(0)
D
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.

Dunnite answered 8/9, 2018 at 21:17 Comment(0)
H
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.

Honorarium answered 22/11, 2018 at 21:3 Comment(0)
V
0

Try this. It worked for me

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/cli@next
Varityper answered 10/4, 2019 at 5:5 Comment(0)
M
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

Materse answered 12/8, 2019 at 19:23 Comment(0)
A
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.

Argali answered 11/5, 2020 at 8:30 Comment(1)
What operating system? Linux? Windows?Butyrin
P
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
Plan answered 29/6, 2020 at 9:3 Comment(0)
T
0

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

Tate answered 7/10, 2020 at 15:43 Comment(0)
R
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.

Rhine answered 19/11, 2020 at 16:59 Comment(0)
H
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.

Hartsock answered 18/8, 2022 at 5:40 Comment(0)
C
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

Catchpole answered 21/10, 2023 at 13:38 Comment(0)
S
0

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

Shantelleshantha answered 27/3 at 4:39 Comment(0)
E
-1

npm i OR npm install

then after, re-run the appliaction.

Engeddi answered 11/2 at 9:56 Comment(0)
E
-2

I just did the below, and it worked.

npm install --save-dev
Eel answered 26/1, 2021 at 7:28 Comment(1)
unhelpful comment, try answering why it worked, what was failing, etc.Stereoscope
J
-5

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

npm i npm@latest -g
Jacklighter answered 28/6, 2018 at 2:38 Comment(1)
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-angularBondstone

© 2022 - 2024 — McMap. All rights reserved.