ng-serve is not working - Could not find module "@angular-devkit/build-angular"

DineshChopra commented 6 years ago

Versions

ng : 6.0.0 node : v8.9.0 npm : 6.0.0 Operating System : macOS

<!--
Output from: `ng --version`.
If nothing, output from: `node --version` and `npm --version`.
  Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
-->

Repro steps

Step 1
Step 2
Step 3

I have created new project with angular-cli. ng new testapp cd testapp npm install ng serve

ng serve is not working. I found following error

Could not find module "@angular-devkit/build-angular" from "/Users/dic/workspace/projects/carpool".
Error: Could not find module "@angular-devkit/build-angular" from "/Users/dic/workspace/projects/carpool".
    at Object.resolve (/usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/core/node/resolve.js:141:11)
    at Observable.rxjs_1.Observable [as _subscribe] (/usr/local/lib/node_modules/@angular/cli/node_modules/@angular-devkit/architect/src/architect.js:132:40)
    at Observable.subscribe (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Observable.js:162:69)
    at DoOperator.call (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/tap.js:71:23)
    at Observable.subscribe (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/Observable.js:159:22)
    at /usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/util/subscribeTo.js:22:31
    at Object.subscribeToResult (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/util/subscribeToResult.js:7:45)
    at MergeMapSubscriber._innerSub (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:132:38)
    at MergeMapSubscriber._tryNext (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:129:14)
    at MergeMapSubscriber._next (/usr/local/lib/node_modules/@angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:112:18)

dic@dic.local [~/workspace/projects/carpool]$ ng --version

So request you to please help me to resolve that issue

Observed behavior

<!-- Normally this includes a stack trace and some more information. -->

Desired behavior

Mention any other details that might be useful (optional)

tomash970 commented 6 years ago

Same here:

Angular CLI: 6.0.0 Node: 10.0.0 Ubuntu 16.04

Could not find module "@angular-devkit/build-angular" from "/opt/lampp/htdocs/newp". Error: Could not find module "@angular-devkit/build-angular" from "/opt/lampp/htdocs/newp". at Object.resolve (/opt/lampp/htdocs/newp/node_modules/@angular-devkit/core/node/resolve.js:141:11) at Observable.rxjs_1.Observable [as _subscribe] (/opt/lampp/htdocs/newp/node_modules/@angular-devkit/architect/src/architect.js:132:40) at Observable.subscribe (/opt/lampp/htdocs/newp/node_modules/rxjs/internal/Observable.js:162:69) at DoOperator.call (/opt/lampp/htdocs/newp/node_modules/rxjs/internal/operators/tap.js:71:23) at Observable.subscribe (/opt/lampp/htdocs/newp/node_modules/rxjs/internal/Observable.js:159:22) at /opt/lampp/htdocs/newp/node_modules/rxjs/internal/util/subscribeTo.js:22:31 at Object.subscribeToResult (/opt/lampp/htdocs/newp/node_modules/rxjs/internal/util/subscribeToResult.js:7:45) at MergeMapSubscriber._innerSub (/opt/lampp/htdocs/newp/node_modules/rxjs/internal/operators/mergeMap.js:132:38) at MergeMapSubscriber._tryNext (/opt/lampp/htdocs/newp/node_modules/rxjs/internal/operators/mergeMap.js:129:14) at MergeMapSubscriber._next (/opt/lampp/htdocs/newp/node_modules/rxjs/internal/operators/mergeMap.js:112:18)

DineshChopra commented 6 years ago

I remove my repo. Create new project again ng new testapp cd testapp npm install ng serve

Its working for me know, but don't know why its not working earlier. Either its a problem of angular-cli or its a problem of my system.

It waste my 3 hours. So please clarify what exactly we have to do when we face that kind of issue.

ahnpnl commented 6 years ago

I encountered this issue when use ng update to upgrade from 5 to 6. After successfully upgraded, the app couldn't start

Blair2004 commented 6 years ago

Same right here... but have seen that the last CLI command to update : rxjs-5-to-6-migrate -p src/tsconfig.app.json

doesn't work as expected. Indeed that throw an error :

Running the automatic migrations. Please, be patient and wait until the execution completes.
'C:\Users\Blair' n'est pas reconnu en tant que commande interne
ou externe, un programme ex�cutable ou un fichier de commandes.
child_process.js:644
    throw err;
    ^

Error: Command failed: C:\Users\Blair Jersyer\AppData\Roaming\npm\node_modules\rxjs-tslint\node_modules\.bin\tslint -c C:\Users\Blair Jersyer\AppData\Roaming\npm\node_modules\rxjs-tslint\rxjs-5-to-6-migrate.json -p src/tsconfig.app.json --fix

Should probably mention that, my Windows username has a space between "Blair Jersyer", does it have anything to do with ?

Blair2004 commented 6 years ago

@DineshChopra i've finally made this npm install @angular-devkit/build-angular and it worked. I'm wondering it sould be within the dev deps or not ?

casoetan commented 6 years ago

@Blair2004 it should be in dev deps (@angular-devkit).

superstator commented 6 years ago

Was running into this, and it ended up being a mismatch between the version of rxjs in package-lock.json and my installed version. Updated all my machines to 6.1 with npm i -g rxjs and am able to build and run again. Supremely unhelpful error message, though...

kylebradshaw commented 6 years ago

For myself, during an upgrade from an NG5 app, when I hit this issue I essentially deleted my package-json.lock file and removed my node_modules dir and then npm i again and it worked. @superstator was right though the issue is in the package-lock.json file if you're upgrading from NG5

shauvet commented 6 years ago

You can try rm -rf node_modules then reinstall npm i. This works for me.

superstator commented 6 years ago

FWIW, I wasn't upgrading an old project. I started a brand new project over the weekend on one machine (Win 10) and then checked it out and attempted to run on another (MacOS High Sierra). Both have brand new node installs, and @angular/cli 6.0, I just somehow ended up with rxjs 6.0 on one and 6.1 on the other, and the build was apparently flummoxed by the mismatched version.

I saw the crash both ways, too - the project was created with a reference to rxjs 6.0, and this crashed when I checked it out on the machine with rxjs 6.1. Somehow I managed to thrash around and upgrade the project without realizing it, and it started working on the 6.1 machine. Then I moved back to the original machine with 6.0 and it started crashing again, and I had to go take a break before I threw something out the window. I finally figured it out by nuking the entire project folder on the 6.0 machine, recreating from scratch with ng new, verifying that ran OK, and then stepping through the git diff until I narrowed it down to the rxjs version.

krishragu12395 commented 6 years ago

I think RxJS v6 has major changes from v5, v6 brings backwards compatibility package rxjs-compat that will keep your applications working, but you should refactor TypeScript code so that it doesn't depend on rxjs-compat. For the same run following npm install -g rxjs-tslint, rxjs-5-to-6-migrate -p src/tsconfig.app.json npm uninstall rxjs-compat for. Then npm install --force for bypass the node-sass issues. You'll have a broken node-sass install but everything else will still work. Now my existing angular 5 app is upgraded to angular 6.

JoA-MoS commented 6 years ago

I had the same issue I found that running the command to create the new project in PowerShell rather than Git Bash seemed to solve the problem for some reason.

ken107 commented 6 years ago

I looked inside node_modules and apparently only dependencies are installed, not devDependencies. With the new NPM, we need to explicitly get the devDependencies:

npm i --only=dev

sliceofbytes commented 6 years ago

I recently helped someone debug this issue, problem ended up being an old yarn install he had forgotten about.

I had him uninstall yarn completely and attempt to ng new test-app

the next error made the problem obvious.

'yarn' is not recognized as an internal or external command, operable program or batch file. Package install failed, see above.

Had him set angular-cli package manager back to npm.

ng config -g cli.packageManager npm

and everything worked. Hope this helps someone.

lichunbin814 commented 6 years ago

I have the same issue with @ken107, but I don't know why my NPM config had set to production if you have the same problem, you can check it by below command

Run npm config get production

https://stackoverflow.com/a/35098833/7291379

craviteja commented 6 years ago

Please do below steps

Delete node_modules and package-lock.json (if you have one)
And npm install again.

Its will be work perfectly.

aeksco commented 6 years ago

I got this working by moving a few things around in package.json

I moved the following from devDependencies into dependencies:

@angular-devkit/build-angular
typescript
@angular/compiler-cli

My particular issue was builds passing locally on my development machine, but failing in my Jenkins CI pipeline. Using angular ^6.0.0, codebase generated with angular/cli and I was trying to run ng build. Moving those dependencies around seemed to do the trick, but I cannot speak to why those changes fixed the build

grepit commented 6 years ago

All of the above answer are correct but they did not work for me. The only way I was able to make this work was by follow steps/commands

npm unistall -g @angular/cli@6.0.8 npm cache clean --force npm install -g @angular/cli@6.0.8 npm install node-sass -g ng new MY_PROJECT_NAME cp -r from_my_old_project to_new_MY_PROJECT_NAME

princeV commented 6 years ago

Another issue could be with your dev-dependencies. Please check if they have been installed properly (check if they are availabe in the node_modules folder)

If not then a quick fix would be:

npm i --only=dev

Or check how your npm settings are regarding prod:

npm config get production

In case they are set to true - change them to false:

npm config set -g production false

and setup a new angular project.

Found that hint here: https://github.com/angular/angular-cli/issues/10661 (ken107 and lichunbin814)

Hope that helps.

shivymehta98 commented 6 years ago

@Angular/cli 6.0.8 version : node -v :8.11.2 npm -v : 6.1.0 I was facing the below issue from 2 days and tried all possible solutions.

Local workspace file ('angular.json') could not be found. Error: Local workspace file ('angular.json') could not be found.

Solution : First confirm that you are there in a write folder where u have created a new file n downloaded angular.json . Do ng serve If still it doesn't work Look inside node_modules..You must have only dependencies are installed n v need devDependencies Type npm i --only=dev

NoahStevan commented 6 years ago

I am having the same issue. when checking my angular cli >ng -v angular-cli

there is packages error, so i do @nanoseconds does

npm unistall -g @angular/cli@6.0.8
npm cache clean --force
npm install -g @angular/cli@6.0.8
npm install node-sass -g

still not working. npm ERR! Unexpected end of JSON input while parsing near '...browserstack-launch er'

apaluri18 commented 6 years ago

Thanks npm install @angular-devkit/build-angular but i seem to run into another error

Versions of @angular/compiler-cli and typescript could not be determined. The most common reason for this is a broken npm install.

Please make sure your package.json contains both @angular/compiler-cli and typescript in devDependencies, then delete node_modules and package-lock.json (if you have one) and run npm install again.

Following the instructions in this thread https://github.com/angular/angular-cli/issues/8407

NoahStevan commented 6 years ago

Thanks its working now.

On Tue, Jul 3, 2018 at 1:23 PM, apaluri18 notifications@github.com wrote:

Thanks npm install @angular-devkit/build-angular but i seem to run into another error

Versions of @angular/compiler-cli and typescript could not be determined. The most common reason for this is a broken npm install.

Please make sure your package.json contains both @angular/compiler-cli and typescript in devDependencies, then delete node_modules and package-lock.json (if you have one) and run npm install again.

Following the instructions in this thread #8407 https://github.com/angular/angular-cli/issues/8407

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/10661#issuecomment-402016539, or mute the thread https://github.com/notifications/unsubscribe-auth/Amxa8wZoGth7pKBlBaZPdCGguc47Re1Uks5uCv_QgaJpZM4Tzg0v .

Madslick commented 6 years ago

craviteja's answer worked for me

delete node_modules/ and package-lock.json npm install

all better

gabrielsodre91 commented 5 years ago

The solution of @ken107 worked for me.

npm i --only=dev

soheshdoshi commented 5 years ago

npm i -D @angular-devkit/core it's work

shubham246 commented 5 years ago

Tried all the options but worked only with npm i --only=dev

Snedden commented 5 years ago

Same prob here tried all the above solution , had to make a new project

michaelcmundo commented 5 years ago

I have issues with ng serve as it returns the following..

Cannot find module '@angular/compiler-cli' Error: Cannot find module '@angular/compiler-cli'.... Then when I do ng version it returns these: Package Version

@angular-devkit/architect 0.10.6 (cli-only) @angular-devkit/build-angular @angular-devkit/core 7.0.6 (cli-only) @angular-devkit/schematics 7.0.6 (cli-only) @angular/cli @angular/compiler-cli @angular/language-service @schematics/angular 7.0.6 (cli-only) @schematics/update 0.10.6 (cli-only) rxjs 6.3.3 typescript 3.1.6 (cli-only)

But my package.json seems do have those: { "name": "testapp", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~7.0.0", "@angular/common": "~7.0.0", "@angular/compiler": "~7.0.0", "@angular/core": "~7.0.0", "@angular/forms": "~7.0.0", "@angular/http": "~7.0.0", "@angular/platform-browser": "~7.0.0", "@angular/platform-browser-dynamic": "~7.0.0", "@angular/router": "~7.0.0", "core-js": "^2.5.4", "rxjs": "~6.3.3", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.10.0", "@angular/cli": "~7.0.6", "@angular/compiler-cli": "~7.0.0", "@angular/language-service": "~7.0.0", "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.1.6" } }

I tried removing package-lock.json and npm install but didn't help. Any idea why those packages have with the version command?

Here's the result for npm install: \testapp> npm install npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor. npm notice created a lockfile as package-lock.json. You should commit this file. audited 39133 packages in 9.165s found 0 vulnerabilities

Addition notes: npm -v (6.4.1) & node -v (v10.13.0)

rahimnagori commented 5 years ago

I'm also facing the same issue : I installed and started a test app successfully. I git push it from a machine. Then I pulled it on another machine and now this issue occurs.

shivymehta98 commented 5 years ago

You can go for "npm install" everytime whenever you git pull some another app to your machine as the pushed code on the github is not having node modules.

On Sat, 9 Feb 2019, 12:55 pm Abdul R Nagori, notifications@github.com wrote:

I'm also facing the same issue : I installed and started a test app successfully. I git push it from a machine. Then I pulled it on another machine and now this issue occurs.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/10661#issuecomment-462021659, or mute the thread https://github.com/notifications/unsubscribe-auth/AlUswsGdBJSYDS4d8M-z1yLaGmAlqnaAks5vLnfSgaJpZM4Tzg0v .