search

angular-architects / module-federation-plugin

MIT License
735 stars 203 forks source link

Ng Serve Port not respected #692

Closed AlanGRutter closed 1 week ago

AlanGRutter commented 1 week ago

With what library do you have an issue?

native-federation

Reproduction of the bug/regression with instructions

I am trying to use Microsoft Aspire to spin up Angular 18 front-ends by following this guide . It should be possible to pass the automatically assigned port from WithHttpEndpoint and use this via the environment variable inside package.json "start:myapp": "ng serve my-app --port $PORT".

As an initial test I tried specifying the port as 5000. This yields the following output

2024-11-12T00:05:21.2530000 > yes-mf-portal@0.0.0 start:myapp
2024-11-12T00:05:21.2530000 > ng serve my-app --port 5000
... 

2024-11-12T00:06:07.7730000 Application bundle generation complete. [5.373 seconds]
2024-11-12T00:06:07.7840000 Watch mode enabled. Watching for file changes...
2024-11-12T00:06:07.7850000 NOTE: Raw file sizes do not reflect development server per-request transformations.
2024-11-12T00:06:07.8490000   ➜  Local:   http://localhost:4200/

As you can see it says it is being served on 4200 and nothing works.

If you specify the port as 5000 in the options section of 'serve-original' inside angular.json to match the ng serve command, the message Local: shows the correct port (5000) but still tries to load certain resources from port 4200.

If I simply run ng serve my-app and only have the port in the 'serve-original' options then the app is served correctly.

However the only working solution is not viable with Aspire unless there is a way to pass the port.

Expected behavior

If the port is specified either via an environment variable or directly using ng serve --port then this should be respected and take precedence. A solution is required that supports running the Angular micro-apps under Aspire for local development.

Versions of Native/Module Federation, Angular, Node, Browser, and operating system

Native Federation: 18.1.2 Angular: 18.1.4 Node: 18.20.4 Browser: Chrome OS: Ubuntu 22.04.4 LTS

Other information

Behaviour is independent of repo so any example repo would suffice. I don't have the technical knowledge to be able to assist with PR.

I would be willing to submit a PR to fix this issue

manfredsteyer commented 1 week ago

Please directly configure all these options in your angular.json. The NF builder is a wrapper for the CLI's builder, but we decided not to tunnel each and every setting through.

AlanGRutter commented 1 week ago

Is it possible to set a port in angular.json using environment variables? If so how? Otherwise your answer is wholly inadequate - as a developer I expect this to work with Aspire. Aspire sets environment variables for the dynamic ports etc.