Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Metourni opened this issue May 29, 2019 · 34 comments
Labels
needs: more info Reporter must clarify the issue

Comments

@Metourni
Copy link

🐞 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
Copy link
Collaborator

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

@alan-agius4 alan-agius4 added the needs: more info Reporter must clarify the issue label May 29, 2019
@Metourni
Copy link
Author

@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
Copy link
Collaborator

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
Copy link
Author

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
Copy link
Collaborator

Can you please share your package.json?

@Metourni
Copy link
Author

Metourni commented May 29, 2019

{
"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
Copy link

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
Copy link

tuuling commented May 30, 2019

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
Copy link

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
Copy link

tuuling commented May 31, 2019

@ryanmcfall see #14581 for a possible solution.

@bhavinshiroya1994
Copy link

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

@lasantha57
Copy link

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
Copy link

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
Copy link

tuuling commented Jun 4, 2019

@bhavinshiroya1994

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

See my previous comment.

@vijayawoshe
Copy link

I am getting the same error. any possible solutions?

@KShewengger
Copy link

KShewengger commented Jun 7, 2019

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
Copy link

lak-coder commented Jun 14, 2019

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
Copy link

@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
Copy link

lak-coder commented Jun 14, 2019

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
Copy link

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
Copy link

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
Copy link

@angular-devkit/build-angular

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

@kishoreny
Copy link

npm audit fix worked for me

@snaspuri
Copy link

snaspuri commented Jun 16, 2019

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
Copy link

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
Copy link

lak-coder commented Jun 20, 2019 via email

@gentunian
Copy link

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
Copy link

razorsharpshady commented Jun 28, 2019

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
Copy link

ghost commented Jul 4, 2019

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
Copy link

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
Copy link

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
Copy link

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

Hope this works for you too 😁

@devsull
Copy link

devsull commented Jul 23, 2019

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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: more info Reporter must clarify the issue
Projects
None yet
Development

No branches or pull requests