Could not find the implementation for builder @angular-devkit/build-angular:browser

[Metourni]

🐞 Bug report

- [ ] new
- [ x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

I tried to build the project using ng build --prod I got this error.

🔥 Exception or Error

Could not find the implementation for builder @angular-devkit/build-angular:browser
Error: Could not find the implementation for builder @angular-devkit/build-angular:browser
    at WorkspaceNodeModulesArchitectHost.resolveBuilder (/Volumes/Data/Angular/htdocs/thecampus-angular/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:49:19)
    at BuildCommand.initialize (/Volumes/Data/Angular/htdocs/thecampus-angular/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:757:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

🌍 Your Environment

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        8.0.0
@angular/cli                      8.0.0
@angular/compiler-cli             8.0.0
@ngtools/webpack                  6.0.8
@schematics/angular               8.0.0
@schematics/update                0.800.0
rxjs                              5.5.12
typescript                        2.5.3
webpack                           4.8.3

[alan-agius4]

It seems that you are using Angular-CLI version 8, which packages that were meant to be used with version 7.

How did you migrate to Angular CLI version 8? Did you use the ng update command?

Thanks

[Metourni]

@alan-agius4 I am using angular Angular 5 "dependencies": { "@angular/animations": "^5.2.11", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", Each time I try to use the command npm install I get this warnning

added 1 package from 1 contributor, removed 4 packages, updated 1 package and audited 30564 packages in 8.018s found 6 vulnerabilities (2 low, 4 moderate) runnpm audit fixto fix them, ornpm auditfor details so when I ran the npm audit fix cmd it automatically updates CLI version; but with the old version (1.7.4) or with the new one (8.0.0) I get always the errors when I try to build the project.

[alan-agius4]

Hi, @angular/cli version 8 will only work with Angular version 8.

Unfortunately Angular version 5 and CLI version 1, are not longer supported https://angular.io/guide/releases#support-policy-and-schedule

I suggest you update to version 8 by running the update command via ng update @angular/cli @angular/core, This is suggested because when running the update command several migrations will be executed to make your project compatible with the new version which otherwise you'd need to do manually.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[Metourni]

I can't update it ` Error: Cannot update safely because packages have conflicting dependencies. Package @angular/platform-browser would need to match both versions "7.2.15" and "8.0.0, which are not compatible.

Cannot update safely because packages have conflicting dependencies. Package @angular/platform-browser would need to match both versions "7.2.15" and "8.0.0, which are not compatible.

`

[alan-agius4]

Can you please share your package.json?

[Metourni]

{ "name": "thecampus-angular", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "postinstall": "npm run tsformat", "tsformat": "tsfmt -r" }, "private": true, "dependencies": { "@angular/animations": "^5.2.11", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3", "@types/html2canvas": "0.0.35", "@types/jquery": "^3.2.6", "@types/jspdf": "^1.3.0", "angular-calendar": "^0.24.1", "angular-calendar-week-hours-view": "^1.0.2", "angular-draggable-droppable": "^2.0.0", "angular-notifier": "^4.1.1", "angular-resizable-element": "^2.0.0", "bootstrap": "^3.3.6", "calendar-utils": "^0.1.2", "classlist.js": "^1.1.20150312", "core-js": "^2.4.1", "date-fns": "^1.28.5", "enhanced-resolve": "^3.3.0", "html2canvas": "^1.0.0-rc.1", "jquery": "^3.4.1", "jspdf": "^1.5.3", "moment": "^2.24.0", "ng-pick-datetime": "^5.2.0", "ng-recaptcha": "^3.0.0", "ng2-google-charts": "^4.0.0", "positioning": "^1.3.1", "primeng": "^4.1.3", "pusher-js": "^4.4.0", "rxjs": "^5.5.6", "survey-angular": "^1.0.87", "survey-creator": "^1.0.87", "survey-knockout": "^1.0.87", "surveyjs-widgets": "^1.0.87", "tslib": "^1.9.0", "typescript-formatter": "^5.2.0", "zone.js": "^0.8.19" }, "devDependencies": { "@angular-devkit/core": "^8.0.0", "@angular/cli": "~1.7.4", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/jasmine": "2.5.38", "@types/knockout": "^3.4.53", "@types/node": "^11.13.12", "codelyzer": "~2.0.0", "extract-text-webpack-plugin": "^4.0.0-beta.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "^4.1.0", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "^1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "node-sass": "^4.11.0", "protractor": "^6.0.0", "raw-loader": "^0.5.1", "style-loader": "^0.16.1", "ts-node": "~2.0.0", "tslint": "~4.5.0", "typescript": "~2.5.3", "webpack": "^4.32.2" } }

[BulletYuan]

i faced a same problem, i got error msg:"Could not find the implementation for builder @angular-devkit/build-angular:dev-server" after update @angular/cli version 8.0.0; what should i do...?

[tuuling]

It seems the ng update command does not work when using with v5.2. For me the error is: Package @angular/platform-browser would need to match both versions "7.2.15" and "8.0.0, which are not compatible.

[ryanmcfall]

I also cannot update a version 5 project using ng update. I tried following the instructions at https://update.angular.io/#5.0:6.0 and got stuck when executing ng update @angular/cli. It gave me the following error:

Error: Cannot update safely because packages have conflicting dependencies. Package @angular/platform-browser would need to match both versions "7.2.15" and "8.0.0, which are not compatible.
Cannot update safely because packages have conflicting dependencies. Package @angular/platform-browser would need to match both versions "7.2.15" and "8.0.0, which are not compatible.

Here's my package.json

{
  "name": "help-me",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "preinstall": "npm install -g node-gyp",
    "heroku-postbuild": "ng build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.2",
    "@angular/cli": "^1.7.4",
    "@angular/common": "^5.0.2",
    "@angular/compiler": "^5.0.2",
    "@angular/compiler-cli": "^5.0.2",
    "@angular/core": "^5.0.2",
    "@angular/forms": "^5.0.2",
    "@angular/http": "^5.0.2",
    "@angular/language-service": "^5.0.2",
    "@angular/platform-browser": "^5.0.2",
    "@angular/platform-browser-dynamic": "^5.0.2",
    "@angular/router": "^5.0.2",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "bootstrap": "4.0.0-beta.2",
    "codelyzer": "~3.2.0",
    "core-js": "^2.4.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "moment": "^2.22.0",
    "node-sass": "^4.12.0",
    "protractor": "~5.1.2",
    "rxjs": "^5.4.2",
    "ts-md5": "^1.2.4",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~3.2.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {}
}

The only sort of non-standard thing that is here that I'm aware of is that all of the dependencies are listed in the "dependencies" section, even those that are normally in the "devDependencies" section. This was done in order to satisfy requirements specified in https://www.codewithjason.com/deploy-rails-application-angular-cli-webpack-front-end/ which is used to allow an integrated rails / angular app to be deployed to Heroku.

It would be great to have some suggestions on how to resolve this.

[tuuling]

@ryanmcfall see #14581 for a possible solution.

[bhavinshiroya1994]

@tuuling i have same issue fatch, let know if you getting any solution ?

[lasantha57]

I got this error when I to upgrade from angular 7 to 8

Could not find the implementation for builder @angular-builders/dev-server:generic
Error: Could not find the implementation for builder @angular-builders/dev-server:generic

[lasantha57]

I got this error when I to upgrade from angular 7 to 8

Could not find the implementation for builder @angular-builders/dev-server:generic
Error: Could not find the implementation for builder @angular-builders/dev-server:generic

For my case, I found the reason from here https://github.com/meltedspark/angular-builders/blob/master/MIGRATION.MD

[tuuling]

@bhavinshiroya1994

@tuuling i have same issue fatch, let know if you getting any solution ?

See my previous comment.

[vijayawoshe]

I am getting the same error. any possible solutions?

[KShewengger]

What have worked for me was:

1.) Make sure your angular version starts with 7.2.15 (if not, you should install this version first) 2.) Be sure your Node version is 12.x.x 3.) Typescript version 3.4.5 3.) ng update @angular/cli @angular/core (for @angular/cli, be sure to install it both local & global) 4.) npm uninstall @angular-devkit/build-angular 5.) npm install @angular-devkit/build-angular 6.) ng update --all 7.) If you have ViewChild on your application, be sure to edit them with: Source

@ViewChild(<name>, {static: true}) <name>; // Adding static: true on the 2nd param

[lak-coder]

I have updated Angular 8, when am trying to build the application am getting below error. Could not find the implementation for builder @angular-devkit/build-ng-packagr:build

How to resolve this?

[ahirhasmukh]

@Metourni I am getting error also

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 (/home/hasmukh/Hasmukh/angular-project/angular7/frontendcertif-id/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js:49:19) at ServeCommand.initialize (/home/hasmukh/Hasmukh/angular-project/angular7/frontendcertif-id/node_modules/@angular/cli/models/architect-command.js:135:55) at async ServeCommand.validateAndRun (/home/hasmukh/Hasmukh/angular-project/angular7/frontendcertif-id/node_modules/@angular/cli/models/command.js:127:9) at async Object.runCommand (/home/hasmukh/Hasmukh/angular-project/angular7/frontendcertif-id/node_modules/@angular/cli/models/command-runner.js:178:24) at async default_1 (/home/hasmukh/Hasmukh/angular-project/angular7/frontendcertif-id/node_modules/@angular/cli/lib/cli/index.js:32:31)

[lak-coder]

I have updated Angular 8, when am trying to build the application am getting below error. Could not find the implementation for builder @angular-devkit/build-ng-packagr:build

How to resolve this?

[lak-coder]

What have worked for me was:

1.) Make sure your angular version starts with 7.2.15 (if not, you should install this version first) 2.) Be sure your Node version is 12.x.x 3.) Typescript version 3.4.5 3.) ng update @angular/cli @angular/core (for @angular/cli, be sure to install it both local & global) 4.) npm uninstall @angular-devkit/build-angular 5.) npm install @angular-devkit/build-angular 6.) ng update --all 7.) If you have ViewChild on your application, be sure to edit them with: Source

@ViewChild(<name>, {static: true}) <name>; // Adding static: true on the 2nd param

Still getting error. Could not find the implementation for builder @angular-devkit/build-ng-packagr:build Error: Could not find the implementation for builder @angular-devkit/build-ng-packagr:build at WorkspaceNodeModulesArchitectHost.resolveBuilder

[lak-coder]

I have updated Angular 8, when am trying to build the application am getting below error. Could not find the implementation for builder @angular-devkit/build-ng-packagr:build How to resolve this?

I resolved issue, clear cache and npm install --save-dev build-ng-packagr

[lak-coder]

@angular-devkit/build-angular

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

[kishoreny]

npm audit fix worked for me

[snaspuri]

I faced this issue after updating the typescript to latest version but it was resolved by ng update @angular/core in project

worked for me

[RolfDeVries]

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

This one worked for me! but something strange now in my package.json:

"@angular-devkit/build-angular": "^0.800.3",

Is this normal?

[lak-coder]

Yes. No issue

On Fri, 21 Jun 2019, 12:43 a.m. RolfDeVries, notifications@github.com wrote:

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

This one worked for me! but something strange now in my package.json:

"@angular-devkit/build-angular": "^0.800.3",

Is this normal?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/14546?email_source=notifications&email_token=ALSH6GHCKC2QB3VD6MB2XI3P3PJFPA5CNFSM4HQJFYPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYGK52Q#issuecomment-504147690, or mute the thread https://github.com/notifications/unsubscribe-auth/ALSH6GEHNQDGHTU4LBJBDWTP3PJFPANCNFSM4HQJFYPA .

[gentunian]

What have worked for me was:

1.) Make sure your angular version starts with 7.2.15 (if not, you should install this version first) 2.) Be sure your Node version is 12.x.x 3.) Typescript version 3.4.5 3.) ng update @angular/cli @angular/core (for @angular/cli, be sure to install it both local & global) 4.) npm uninstall @angular-devkit/build-angular 5.) npm install @angular-devkit/build-angular 6.) ng update --all 7.) If you have ViewChild on your application, be sure to edit them with: Source

@ViewChild(<name>, {static: true}) <name>; // Adding static: true on the 2nd param

step 6 fails with:

Using package manager: 'npm'
Collecting installed dependencies...
Found 35 dependencies.
                  Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.2")
                  Package "@angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.2").
Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.

I did a lot of weird stuff to get it working:

# uninstall build-angular and typescript
npm uninstall @angular-devkit/build-angular
npm uninstall typescript
# update all
ng update --all --allow-dirty
# install the needed typescript and build-angular
npm install @angular-devkit/build-angular
npm install --save typescript@3.4.5

Seems to work now. Compiles the bundles and starts de app.

[razorsharpshady]

What have worked for me was:

1.) Make sure your angular version starts with 7.2.15 (if not, you should install this version first) 2.) Be sure your Node version is 12.x.x 3.) Typescript version 3.4.5 3.) ng update @angular/cli @angular/core (for @angular/cli, be sure to install it both local & global) 4.) npm uninstall @angular-devkit/build-angular 5.) npm install @angular-devkit/build-angular 6.) ng update --all 7.) If you have ViewChild on your application, be sure to edit them with: Source

@ViewChild(<name>, {static: true}) <name>; // Adding static: true on the 2nd param

Compiled successfully up until step 5th, Even then I went for the 6th step ng update --all but it threw error

Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2").
Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.

So used "ng update --all --force" command , it ran without a problem But typescript was also updated during the update so it threw error on ng serve which was ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.5.0 but 3.5.2 was found instead.

Before ng update the typescript version was 3.4.5 so I downgrade it with npm install typescript@">=3.4.4 <3.5"

and it worked. Thanks @KShewengerz

[ghost]

I get this error even with a brand-new angular project. ng new <project-name> --style scss --routing ng serve And I get the following error: An unhandled exception occurred: Cannot find module '@angular/compiler-cli/ngcc'

None of the above suggestions worked so far. Any ideas how to fix it? Angular team?

[tdekoekkoek]

I was struggling with this after upgrading to Angular 8. I had to do a few things including removing all the node_modules and then later: update @angular/cli @angular/core npm audit fix

[PooyaDel]

What have worked for me was:

1.) Make sure your angular version starts with 7.2.15 (if not, you should install this version first) 2.) Be sure your Node version is 12.x.x 3.) Typescript version 3.4.5 3.) ng update @angular/cli @angular/core (for @angular/cli, be sure to install it both local & global) 4.) npm uninstall @angular-devkit/build-angular 5.) npm install @angular-devkit/build-angular 6.) ng update --all 7.) If you have ViewChild on your application, be sure to edit them with: Source

@ViewChild(<name>, {static: true}) <name>; // Adding static: true on the 2nd param

One important thing.......be VERY CAREFUL with running the command of "ng update --all" At this point in time, it upgraded my karma/jasmine to an unstable version and caused me so much pain to figure out the root cause (tests would randomly fail).

[clementohNZ]

I got this error as well. What worked for me was running yarn install again.

Hope this works for you too 😁

[devsull]

What have worked for me was:

1.) Make sure your angular version starts with 7.2.15 (if not, you should install this version first) 2.) Be sure your Node version is 12.x.x 3.) Typescript version 3.4.5 3.) ng update @angular/cli @angular/core (for @angular/cli, be sure to install it both local & global) 4.) npm uninstall @angular-devkit/build-angular 5.) npm install @angular-devkit/build-angular 6.) ng update --all 7.) If you have ViewChild on your application, be sure to edit them with: Source

@ViewChild(<name>, {static: true}) <name>; // Adding static: true on the 2nd param

Thank you! The thing that worked for me while updating one of my projects was using your step 4 & 5. The NG build was hung up on an old @angular-devkit/build-angular ... not sure why it wasn't updated.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}