Use @nx/angular:browser-esbuild instead of @angular-devkit in generated apps

[maxkoretskyi]

I've checked today and the most recent Nx Angualr generator uses esbuilders from @angular-devkit. Are there any plans to switch default builders in Nx projects to browser-esbuild? If I understand correctly, @nx/angular:browser-esbuild seems to be supporting plugins now.

[leosvelperez]

Thanks for the suggestion!

We might not switch the default straight away, but I think it's reasonable to make it an option. That way you could opt-in to use the @nx/angular executors at generation time or even set generator defaults so it becomes your workspace default. We'll look into this soon.

[leosvelperez]

They should all be pretty safe to use. So far we've always generated targets using the Angular DevKit builders so it's closer to the Angular CLI experience (with the exception of executors that are required, e.g. @nx/angular:module-federation-dev-server). You can then use our executors if you need some extra features the Angular DevKit builders don't provide. The @nx/angular:application and @nx/angular:browser-esbuild executors are a thin layer on top of the Angular DevKit builders and meant to be a drop-in replacement for them. They only add support for extra features (like the ability to provide esbuild plugins) and invoke the Angular DevKit builders to do the job. So, conflicts are not expected unless there's a bug.

Your suggestion makes total sense. Even though we'll still default to generate targets using the Angular DevKit builders, there's no reason to not let the user decide to use the Nx executors and avoid them having to manually change them after the generation happens.

I just realized you mentioned the @nx/angular:browser-esbuild specifically, and just to clarify, that one (or the @angular-devkit/build-angular:browser-esbuild) only exists to ease a migration for existing targets from webpack-based executors to esbuild-based ones. We wouldn't generate new projects with it.

[maxkoretskyi]

I just realized you mentioned the @nx/angular:browser-esbuild specifically, and just to clarify, that one (or the @angular-devkit/build-angular:browser-esbuild) only exists to ease a migration for ...

so which one should we use instead of existing @nx/angular:webpack-browser?

They only add support for extra features (like the ability to provide esbuild plugins)

yeah, that's important for us and that's what 12754 seems to have implemented

[leosvelperez]

so which one should we use instead of existing @nx/angular:webpack-browser?

For new applications you should use the @nx/angular:application executor.

If you're talking about migrating your existing projects, you can use either of the esbuild-based builders (browser-esbuild or application). The browser-esbuild one would allow you for a quick migration because it's a drop-in replacement for the webpack-based builder. The application builder is the recommended option because it has more improvements, but it requires more effort to migrate to. You can read about the migration to esbuild at https://angular.dev/tools/cli/build-system-migration.

Note that we provide this generator https://nx.dev/nx-api/angular/generators/convert-to-application-executor to convert your existing project targets to use the application executor.

[maxkoretskyi]

thanks for the elaborate answer! we're using a bit of customization through @angular-builders/custom-webpack:browser, particulararly MonacoWebpackPlugin, which I think we can now also put into esbuild builder:

module.exports = (config, options, targetOptions) => {
  ...
  config.plugins.push(
    new webpack.DefinePlugin({... }),
  );

  config.module.rules.push({
    test: /\.css$/,
    include: MONACO_DIR,
    use: [...],
  });

  config.plugins.push(
    new MonacoWebpackPlugin({
      languages: ['python', 'sql'],
    }),
  );

Note that we provide this generator https://nx.dev/nx-api/angular/generators/convert-to-application-executor to convert your existing project targets to use the application executor.

good to know, so maybe we will try to use this one and then add esbuild plugins on top of that

[leosvelperez]

Yes, you'll need to convert your custom webpack configuration to the analogous esbuild setup. The convert-to-application-executor generator won't convert the targets using a custom webpack configuration because manual conversion is needed for those customizations. You can check the Angular docs guide on how to manually migrate to the esbuild-based builders (you can replace them with the @nx/angular executors).