Shared buildable library code is included in each remote app bundle

[tachojelev]

Current Behavior

We have the following setup:

libs/
|--shared
apps/
|--first-app
|--second-app

The shared library is buildable and when it is built for production, it produces a bundle in the dist/libs/shared directory.
The two apps are using the same feature from the shared library, for example a button component with logic in its typescript. When the apps are built for production, they are built into dist/apps/first-app and dist/apps/second-app respectively.

When the two apps are built, they incorporate the built source code of the library in their own bundles, instead of referencing the built source code of the library. This leads to duplicating the code from the library into all apps.

Example:

// my-monorepo/libs/shared/button/button.component.ts

@Component({
  selector: 'shared-button',
  templateUrl: './shared-button.component.html',
  styleUrls: ['./shared-button.component.scss']
})
export class SharedButton {
  hello(): string {
    return 'Hello from SharedButton';
  }
}

dist/apps/first-app/main.js // contains the whole code for SharedButton 
dist/apps/second-app/main.js // contains the whole code for SharedButton 
dist/libs/shared/button.js // contains the whole code for SharedButton 

I have tried using tsconfig-paths by pointing to the respective dist directory of the shared button (dist/libs/shared/button), but the result was the same.

Expected Behavior

When the two apps are built, they reference the built source code of the library, instead of bundling the library source code into their own bundles. This would avoid duplication of code.

GitHub Repo

No response

Steps to Reproduce

1. Create new nx monorepo
2. Create a shared buildable library
3. Create a component in the buildable library and export it from an entry-point
4. Create two remote apps
5. Use the shared component in the two remote apps

Nx Report

Nx 18

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[ndcunningham]

Hi,
I am not sure what your expectation is but, at build time your dependencies are bundled unless you specify a separate entry point and configuration this is how bundling works.

Similarly, all your apps(shell/remotes) will also have Angular bundled together as they (your apps) can be deployed (based on your configuration) without each other.
i.e

• You can run second-app before running the first-app
• Or if the first-app is broken the second-app could still be running.

vice-versa

This is a key part of module federation. At run-time if the module is already loaded it will be read from webpack's cache.

You can read more here: https://nx.dev/concepts/module-federation/manage-library-versions-with-module-federation