Error with Angular 17.3.2 and Node.js 20.10.0 - Schema validation failed with the following

[leogouveia]

I'm currently working on a project using Angular 17.3.2 and Node.js 20.10.0, but I've encountered an error.
Despite thorough research and verifying that angular.json includes @angular-builders/custom-webpack:browser as specified, the issue persists.
This setup was configured using ng add, following the official documentation guidelines.
Could anyone help me with this problem?
You can review my code at https://github.com/leogouveia/sspa2-navbar. This error occurs both on my local machine and in GitHub Codespaces.

Any assistance would be greatly appreciated.

Demonstration

ng new sspa2-navbar
ng add single-spa-angular --project sspa2-navbar
npm run serve:single-spa:sspa2-navbar

Warning: Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information.
Error: Schema validation failed with the following errors:
  Data path "" must NOT have additional properties(browser).

Expected Behavior

Application should start in development

Actual Behavior

Application crashes with message:

Warning: Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information.
Error: Schema validation failed with the following errors:
  Data path "" must NOT have additional properties(browser).

[utsav-mehta-ext-volansys]

@leogouveia
I encountered a similar issue and discovered that in the angular.json file,
"browser": "src/main.ts"
was added in Angular 17 version, which seemed to be the root cause of the problem. Upon removing this line, everything functioned as anticipated.

May this help you as well

[leogouveia]

@utsav-mehta-ext-volansys Yesterday I did some tests by fiddling with the properties of the angular.json file and ended up discovering this too.
Another thing I realised is that today, we're stuck with webpack. Will they update it to use vite and esbuild as well? Vite's speed is much greater in the development environment.

[iamajmalhassan]

I too had encountered the same issue a week back and had to remove the "browser": "src/main.ts" to fix the error. I'm surprised this issue did not get raised sooner, considering it appears to be present since Angular v17.0.0.
Am I missing something here as the issue seems to occur even while following the documentation. If not I'd be happy to contribute a PR with the fix if that would be helpful :)

[iamajmalhassan]

https://github.com/just-jeb/angular-builders/issues/1595

Saw the above issue and I'm not sure what needs to be done here. Can you suggest a proper solution for this issue @arturovt?

[arturovt]

The architect[build].browser wasn't introduced in Angular v17. It's a distinct property within a separate builder called :application. The purpose of custom-webpack is to substitute the Webpack builder, while the ESBuild :application builder necessitates the custom-esbuild builder. This constitutes a fundamentally different setup. I'm uncertain how delete options.browser would address the problem.

This requires a full rewrite of the Webpack configuration to align with the ESBuild setup. However, the issue lies in the fact that ESbuild doesn't encompass all the features outlined in the single-spa-angular Webpack configuration transformer.

[leogouveia]

@arturovt Sorry if I am entirely wrong. But it seems that normal setup with custom-webpack "disables" esbuild completely. So if you add single-spa-angular and remove "browser": "src/main.ts" it will use webpack instead. This seems to be a temporary solution until something else comes along with esbuild.

[arturovt]

You will not be able to use ESBuild because they don't support all of the required single-spa features (like SystemJS output evanw/esbuild#192).

[iamajmalhassan]

I'm uncertain how delete options.browser would address the problem.

@arturovt This is my understanding. When creating a new Angular v17 app, :architect is the default builder which uses architect.build.options.browser and so it gets added to the build options. But since we're stuck with custom-webpack:browser which uses the options.main, we need to remove the options.browser property which was added for the default :architect builder.

Currently custom-webpack is throwing a schema validation error that browser property should not be present in build options.

[leogouveia]

@iamajmalhassan I agree, or at least update the docs explaining about the "bug" and how to work around it. I racked my brains for hours until I understood what was happening and found a solution.

[arturovt]

I made a PR to the docs stating that builder should be set to :browser before running schematics (https://github.com/single-spa/single-spa.js.org/pull/634/files#diff-ee724f6994bbcbf26bf9b8dfa7777b04cfca5c34afb283a92a39d67acbdc2538R77-R80)