Which builder to use when using nx with angular.json

Question

I migrated an existing angular project to use nx. But I am not quite sure if I did it the correct way, as the performance is very poor.

I now switched from

"builder": "@angular-devkit/build-angular:browser",

to

"builder": "@nrwl/web:build",

and it seems that the performance got better. But there are more, for example:

"builder": "@nrwl/angular:webpack-browser",
"builder": "@nrwl/angular:ng-packagr-lite",

Is it correct to use web:build? What are the differences? Unfortunately I cannot find a good explanation on their website. Anybody can point me to the right direction? Which builder to use when? What are the differences?

Answer 1

I know it's been a couple of months, but for the sake of completeness: the ngPackagr one should be used for libraries only, as specified in their repo. Is that what you were trying to do? Also, what did you mean by poor performance?

If it's any reference (or for future visitors) I just created an NX app and it came with @angular-devkit/build-angular:browser by default.

Answer 2

I had the same problem after an Nx update, so did a little search on their official website. It's sad that they don't provide sufficient documentation for migrations. However, as they have documented clearly in their @nrwl/angular:webpack-browser page,

The webpack-browser executor is very similar to the standard browser builder provided by the Angular Devkit. It allows you to build your Angular application to a build artifact that can be hosted online. There are some key differences:

• Supports Custom Webpack Configurations
• Supports Incremental Building

A customWebpackConfig can be provided but is optional and still the Angular Devkit Configuration takes priority.

Nx configuration has now been updated to version: 2 and "builder": "@angular-devkit/build-angular:browser",was the standard way of specifying the executor inversion: 1. Check your Nx configuration version and if you want to update it to 2`, follow the instructions here.