Sign in
Skip to solution
hardFrontend

How do you handle micro-frontend architecture in Angular using Module Federation?

1.1k views
01

Understand the problem

Explain how webpack module federation allows dynamically loading Angular bundles.

architecturemicro-frontends
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Module Federation allows independent builds to expose and share code dynamically. In Angular, you configure Webpack/esbuild to share core packages (e.g. @angular/core, RxJS) as singletons and load remote components asynchronously via the Router using dynamic import strings.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Dynamic route loading of a Module Federation remote
import { Routes } from '@angular/router';
import { loadRemoteModule } from '@angular-architects/module-federation';

export const routes: Routes = [
  {
    path: 'admin-dashboard',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
        exposedModule: './AdminModule'
      }).then(m => m.AdminModule)
  }
];
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 84 of 121 decoded in the Angular track. One more won't hurt.

Back to track