angular-examples

This repository is a fork of native-federation/angular-examples.

Purpose

The goal of this fork is to demonstrate a runtime issue when a module-based micro frontend is loaded through Angular’s loadChildren API (combined with Native Federation remote loading): duplicate registration of the same standalone component type produced from different bundles leads to Angular warning NG0912: Component ID generation collision detected.

In this setup, a shared ButtonComponent (from the @simple/ui library) is used both in the host application and inside a lazy-loaded NgModule exposed by the mfe3 remote. Because the federation graph can load logically identical component classes from separate JavaScript bundles, Angular may treat them as two distinct component definitions while they still collide on generated component IDs, which surfaces as NG0912 in the browser console.

Where to look

• Host route that loads the remote module: simple/projects/host/src/app/app.routes.ts (path: 'mfe3', loadChildren via initRemoteEntry / loadRemoteModule).
• Remote lazy module using the same shared button: simple/projects/mfe3/src/app/lazy/ (e.g. lazy.module.ts and sibling route config).
• Shared UI: simple/libs/shared/ui/src/button/button.component.ts.

Running the sample

From the simple/ folder, install dependencies and start the federated apps (see package.json scripts, e.g. start:all to serve host and remotes). Navigate to the host and open the mfe3 route to trigger the lazy load and observe the NG0912 warning when the scenario applies.

Upstream

Original examples and documentation live in the upstream repository: https://github.com/native-federation/angular-examples.