Could not find the implementation for builder @angular-devkit/build-angular:dev-server on ng serve command [duplicate]

Question

I tried to update the angular CLI following this, but now I can't run my app. When I try to run the command ng serve, it gives me this error:

Could not find the implementation for builder @angular-devkit/build-angular:dev-server
Error: Could not find the implementation for builder @angular-devkit/build-angular:dev-server
    at WorkspaceNodeModulesArchitectHost.resolveBuilder (C:\Users\Lupus\Documents\full-stack-projects\financial-app-ui\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js:49:19)
    at ServeCommand.initialize (C:\Users\Lupus\Documents\full-stack-projects\financial-app-ui\node_modules\@angular\cli\models\architect-command.js:135:55)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

I have tried everything I could found.

• I tried to manually install devkit with the command npm install --save-dev @angular-devkit/build-angular
• I tried to run the command npm i --only=dev
• I tried to run the commands

:

npm install
ng update
npm update

• Removed the node_modules folder and the package-lock.json file and ran the commands all again.

Nothing worked. Running ng v gives me this:

Angular CLI: 8.0.3
Node: 10.15.0
OS: win32 x64
Angular: 8.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@ngtools/webpack                  7.3.9
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.29.0

And my package.json is like this:

{
  "name": "financial-app-ui",
  "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": "^8.0.1",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "^8.0.1",
    "@angular/compiler": "^8.0.1",
    "@angular/core": "^8.0.1",
    "@angular/forms": "^8.0.1",
    "@angular/platform-browser": "^8.0.1",
    "@angular/platform-browser-dynamic": "^8.0.1",
    "@angular/router": "^8.0.1",
    "core-js": "^2.6.9",
    "font-awesome": "^4.7.0",
    "primeicons": "^1.0.0",
    "primeng": "^7.1.3",
    "rxjs": "~6.5.2",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular/cli": "^8.0.3",
    "@angular/compiler-cli": "^8.0.1",
    "@angular/language-service": "^8.0.1",
    "@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": "~4.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.4.5"
  }
}

Does anyone have any other suggestion?

Rikki

Answer 1

I got this working by reinstalling the build-angular package. Note the '--save-dev' flag on the install command:

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

Glim

I had the same issue with @angular-builders/custom-webpack I added the --save-dev on the install and fixed the issue – Malan

that worked for me on the following error message: An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-angular:protractor – Dupondius

I am getting some stupid error about missing python, what the hack angular/node has to do with python. Ng has more dependencies than my first project – Gadgetry

Answer 2

I was able to solve this problem by installing the package @angular-devkit/build-angular using this command:

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

Verboten

Answer 3

Resolved my issue by using the below command:

ng update @angular/cli @angular/core --allow-dirty --force

Phenobarbital

it will project version upgrade to latest if there is. – Larrainelarrie

Answer 4

I had the same problem. Just two command solved my problem

npm uninstall @angular-devkit/build-angular

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

If this doesn't work. don't worry. run this command.

ng update @angular/cli @angular/core --allow-dirty --force

Judaize

Answer 5

ng update should have updated the version for your @angular-devkit/build-angular

I ran into this as well and what I did was created a new Angular app and ensured that ng serve was working fine for that newly created Angular app. I then copied and used the following from the working Angular app's package.json, which is:

`"@angular-devkit/build-angular": "~0.802.2",`

Ensure you run npm install

(The version would most probably change with each Angular update - so check what version you need to use by following the steps I have outlined - if ng update doesn't already update it for you)

Johnathon

Answer 6

Make sure you have this configuration in your angular.json

    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "angular8:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "angular8:build:production"
        }
      }
    }

And make sure you have installed this package

@angular-devkit/build-angular

Replace

If you've updated your project to use a newer Angular version, the angular.json file needs to be updated also (because every Angular version can use a different Angular.json config). The easiest way is to create a new project with the new angular version and copy its angular.json file). – Hernandez

Answer 7

I'm having the same issue, but in my case I am trying to serve a downloaded template of an Angular project. At first it gave me this error after a ng serve --open terminal command.

An unhandled exception occurred:

Could not find module "@angular-devkit/build-angular" from "D:\WORK\Desarrollo\plantillas descargadas\argon-dashboard-angular-master".

I solved that following this Stack Overflow question: https://stackoverflow.com/a/50333128, but got these warnings:

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @ngtools/[email protected] requires a peer of @angular/compiler-cli@>=5.0.0 
<8.0.0 || ^7.0.0-beta.0 but none is installed. You must install peer dependencies 
yourself.
npm WARN [email protected] requires a peer of ajv@^6.9.1 but none is installed. You 
must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] 
(node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
[email protected]: wanted {"os":"darwin","arch":"any"} (current: 
{"os":"win32","arch":"x64"})

But then I got this error after trying the command:

ng serve --open

An unhandled exception occurred: Could not find the implementation for builder @angular-devkit/build-angular:dev-server

I noticed that there were some files missing in my node_modules folder, probably caused by my current connection speed. Anyway I tried on a different computer, somewhere else, opened a clone of the project itself and ran the command:

npm update

then take the project in a .rar file to my working computer and decompressed it, run my VS Code and it just worked perfectly.

Chromatid

Thanks @Brian for the comment edition, and sorry for the trouble, english it is not my mother language. I just hope the post can be usefull. – Chromatid

Answer 8

In angular.json change this line "builder": "@angular-builders/build-angular:browser", to "builder": "@angular-devkit/build-angular:browser", solved my problem.

Warwickshire

Answer 9

This worked for me.

First run update command ie. ng update

On running this you may get a list of other packages that should also be updated.

Install these packages manually as suggested.

After this on running ng serve I got error in angular.json for missing tsconfig.app.json file. These I added manually from this link . I also added tsconfig.spec.json file.

That is it, I ran ng serve again and the project complied successfully.

Kronstadt

Answer 10

If you have npm 7+ installed in your machine try this command in terminal:
npm install --legacy-peer-deps instead of npm install and then run ng serve.

I faced this same issue while running the projects build on older version but none of the solution above could help me. Finally, I found the solution and I am sharing it with you.

Westphal

I'was facing the same problem that had been solved wiht this command too npm install --save-dev @angular-devkit/build-angular --legacy-peer-deps Stack trace was like below: ... npm ERR! node_modules/@angular/common npm ERR! peer @angular/common@"^12.0.0 || ^13.0.0-0" from ...... npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.. – Streaming

Answer 11

Since you got this error, you might be using an app which uses old version of angular dev such as 0.6.x

If you simply uninstall and reinstall , it's very likely that you got other errors like "cannot find module '@angular/compiler-cli/src/tooling'" or Cannot find module '@angular/compiler-cli/ngcc' because it seems that angular has been making a lot changes.

If you solved the problem simply by updating , then forget about the following.

It's best to use the next version(relative to 0.6.5) that doesn't cause the build error and ngcc error.

In my case, the correct version is between the build error and ngcc error.

Oxtail

Answer 12

Double Check Versions: I looked at package.json & checked the all versions of all the Angular/Webkit programs, removing the ones giving me errors Typescript errors such as rxjs and googlemaps.

Remove the package-lock.json. Add all the correct versions of Angular, Webkit, Typescript, etc... checking to see what past versions render. This means looking through the Version history for packages on npmjs.com and matching by date / age and version numbers. Make the changes in package.json and save it.

"dependencies" {
    "@agm/core": "1.0.0",
    "@angular/cdk": "6.1.0",
    "rxjs": "6.0.0",
    "rxjs-compat": "6.0.0",
    ...
},
...
"devDependencies": {
    "@angular-devkit/build-angular": "0.6.1",  // old: "^6.1.0", 
    "@angular/cli": "6.1.0",                   // new: "6.1.0",
    "@angular/compiler-cli": "6.1.0",
    "typescript": "2.7.2"
    ...
}

Start fresh by removing all the old modules:

rm -fR ./node_modules/@angular; rm -fR ./node_modules/@angular-devkit/; rm -fR ./node_modules/typescript; rm -fR ./node_modules/rxjs*; rm package-lock.json;

Then re-install: npm install;

.Pug Template Fix: I'm using a .pug loader so I had to manually patch: node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js to allow Webpack to render Pug files. Add this line after the html rule inside that file:

{ test: /.pug$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] },.

This is imitating what the ng-add-pug-loader.js file is doing to load .pug files in Angular version 6.

Asarum