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

Issue Description

The angular build command gives the below error,

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

builder angular devkitbuild angularbrowser

Resolution

This error I found to be due to a mismatch in the angular-cli framework and corresponding angular dependencies for a given project.

This error is most visible when you are trying to migrate any Angular framework to the latest framework.

This is how I was able to fix these issues and was able to convert/migrate the Angular 5/6 app to Angular 8

Getting Started

Approach 1:

To fix the issue, please run the below command:

Lets try to uninstall existing pacakge,

npm uninstall @angular-devkit/build-angular

next, install the package using the below command,

npm i @angular-devkit/build-angular@latest

Perform update to latest to recent component/module,

ng update
ng update @angular/cli @angular/core

Make sure you have the below version of node js and npm as pre-requisites:

node -v

Verify NPM version

npm -v

Please give it a try with the version you have using the steps mentioned.

The above steps should fix most of your issues. But if you come across any additional issues please follow below a few additional guidelines,

Steps to fix all issues – Approach 2

If the above command alone won’t fix your problem then you can try the below options. Some of you could see a series of below issues being reported after applying the above fix. Please see the below steps to fix all the issues.

All the above issues were resolved by following the below steps for me.

  • Delete the package-lock.json file. Don’t worry next npm install anyway will create a fresh package-lock.json file. Please note that since it’s a framework upgrade, we can use the delete file option otherwise it’s not recommended to delete this file.

package-lock.json

  • delete the node_module folder manually or use the below command in the command prompt (sometimes you might need the admin mode of the command prompt)

npm rm -rf node_modules

  • Install latest CLI

npm install -g @angular/cli

  • Install the devkit and builder package.

npm uninstall @angular-devkit/build-angular

npm i @angular-devkit/build-angular@latest

For any error with the above command please see Could not find module “@angular-devkit/build-angular”

  • Install rxjs-tslint (only if needed)

 npm install -g rxjs-tslint

  • Please make sure to install the latest available typescript version. Typescript version 3.4.5 and above is recommended. 

npm install --save-dev typescript@<supported version>

  • Run ng update command to get a list of all dependencies required to be upgraded.
ng update

  • Upgrade the angular core packages as listed above, you may find more packages in the list depending on app complexities.

ng update @angular/cli @angular/core

OR 

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

This command almost fixes everything else required as dependencies. Read more details on the commands –allow-dirty and –force.

Also, note below that the typescript version is upgraded to 3.4.5 by default.

  • Build the app using ng build
ng build

Finally, the build is successful.

Other references:

Did I miss anything here about Angular 8 commands? Did the above steps resolve your issue? Please sound off in the comments below!


Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published(2024) best practices and guidelines for software design and development.