search

single-spa / single-spa-angular

Helpers for building single-spa applications which use Angular
Apache License 2.0
202 stars 78 forks source link

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

Open leogouveia opened 7 months ago

leogouveia commented 7 months ago

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 commented 7 months ago

@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

image

leogouveia commented 7 months ago

@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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

@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 commented 7 months ago

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

iamajmalhassan commented 7 months ago

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 commented 7 months ago

@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 commented 6 months ago

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)