Use angular native federation with builder configuration: "@angular-devkit/build-angular:browser-esbuild"

[elio1fiore]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

HI,

Using the angular-architects/native-federation library and initializing with the command ng g @angular-architects/native-federation:init --type host the microfrontend will change the angular.json file by adding the esbuild configuration in architect. The esbuild configuration pre-configured the builder with the angular-devkit/build-angular:application option. If I run ng serve with this configuration the microfrontend works, but unfortunately I would need the browser-esbuild option and this is where the problem arises.
So by configuring angular-devkit/build-angular:browser-esbuild and changing the key from options.browser to options.main and then starting ng serve I get the error:

Error: Schema validation failed with the following errors:
Data path "" must have required property 'browser'.

Changing again from options.main to options.browser (not noticing that it warns you by saying: the browser property is not allowed.) and running ng serve again gives me:

Error: Schema validation failed with the following errors:
Data path "" must have required property 'main'.

Another test I performed is deleting the options.main/options.browser key and running ng serve again gives me the error:

Error: Schema validation failed with the following errors:
Data path "" must have required property 'main'.

Even initializing the microfrontend with --type remote gives the same problem

Minimal Reproduction

reproducing this error is simple:

• make a new app
• install @angular-architects/native-federation library (my version is 18.2.2)
• initialize the microfrontend with ng g @angular-architects/native-federation:init --type host
• change in angular.json file architect.esbuild.builder: "@angular-devkit/build-angular:browser-esbuild"
• change from options.browser to options.main
• ng serve

Exception or Error

Error: Schema validation failed with the following errors:
  Data path "" must have required property 'browser'.

Your Environment

Angular CLI: 18.2.11
Node: 22.0.0
Package Manager: npm 10.5.1
OS: win32 x64

Angular: 18.2.11
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.11
@angular-devkit/build-angular   18.2.11
@angular-devkit/core            18.2.11
@angular-devkit/schematics      18.2.11
@schematics/angular             18.2.11
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

Anything else relevant?

No response

[clydin]

The browser-esbuild builder is intended solely as a compatibility bridge for migrating from the browser builder. Its only behavioral difference from application is that it transforms the browser builder options into application options.

Can you provide additional details on your project's use cases for browser-esbuild?

[elio1fiore]

We may need the browser-esbuild configuration when using the library like:
https://github.com/AuScope/angular-cesium

If we look in the projects folder of this library, we find the demo project configured with the :browser settings. Indeed, if I do NOT initialize the project with the command ng g @angular-architects/native-federation:init and by setting :browser, the project compiles and is exposed on localhost.

Currently, if I create MFEs with the ng g @angular-architects/native-federation:init command, the library no longer works. It definitely introduces an additional layer of complexity that I am trying to understand.

[alan-agius4]

I'm sorry, but this issue is not caused by Angular CLI. Please contact the author(s) of the https://github.com/angular-architects/module-federation-plugin project or file an issue on their issue tracker.

[angular-automatic-lock-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.}