Angular Academy · Lesson

Loading Remote Modules

Dynamically load remote micro frontends.

Lesson 4 of 413 steps

Loading Remote Modules is a free Angular Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

Pulling in a Remote at Runtime

Once a remote exposes a module and the host knows its URL, the host loads it on demand with loadRemoteModule. This is a dynamic import over HTTP: nothing about the remote is bundled into the host build.

loadRemoteModule API

loadRemoteModule takes the remote name (from the manifest) and the exposed key (from the remote's exposes). It returns a promise of that module.

import { loadRemoteModule } from '@angular-architects/native-federation';

const m = await loadRemoteModule('catalog', './Routes');

Lazy Loading Remote Routes

The cleanest pattern exposes a routes file from each remote and lazy-loads it in the host router with loadChildren, so the remote loads only when its route is visited.

export const routes: Routes = [
  {
    path: 'catalog',
    loadChildren: () =>
      loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
  },
];

Loading a Single Component

You can also expose and load an individual standalone component, useful for embedding a widget rather than a whole route area.

{
  path: 'widget',
  loadComponent: () =>
    loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}

Exposing on the Remote Side

For the host to load it, the remote must list the export in its exposes map. The key is what the host passes to loadRemoteModule.

// remote federation.config.js
exposes: {
  './Routes': './src/app/catalog.routes.ts',
  './Widget': './src/app/widget.component.ts',
}

Dynamic Manifest Resolution

Because the host reads the manifest at startup, you can swap remote URLs per environment (dev, staging, prod) without rebuilding the host, just by shipping a different manifest file.

Handling Load Failures

Remotes are loaded over the network and can fail (offline, deploy in progress). Wrap loads in error handling so a single broken remote does not crash the whole shell.

loadRemoteModule('catalog', './Routes')
  .then(m => m.CATALOG_ROUTES)
  .catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));

Passing Data Across the Boundary

Communication between host and remote uses shared singleton services or the router, not direct imports. A shared auth service (singleton) lets a remote read the current user the host set.

Versioning and Contracts

The exposed key (e.g. ./Routes) and its shape form a contract. Changing the export shape can break hosts that load it, so treat exposed modules like a public API and version them carefully.

Preloading Strategies

You can eagerly preload a remote after the app is idle to make later navigation instant, while still keeping the initial load light. This balances startup speed against perceived navigation speed.

End-to-End Flow

To recap the runtime path: host reads the manifest, user navigates to a federated route, loadRemoteModule fetches the remote's remoteEntry.json, shared singletons are reused, and the remote's routes/component render inside the host shell.

Quick Check

How does a host load a remote feature lazily?

Answer it in the interactive lesson

Recap

Hosts load remotes at runtime with loadRemoteModule(name, key), usually inside loadChildren/loadComponent for lazy routes. Remotes must expose the key; the manifest resolves URLs per environment. Handle load failures gracefully, communicate via shared singletons, and treat exposed modules as versioned contracts.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Loading Remote Modules” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Loading Remote Modules”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

What will I learn in “Loading Remote Modules”?

Dynamically load remote micro frontends. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

How long does the “Loading Remote Modules” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy