Angular Academy · Lesson

Loading Remote Modules

Dynamically load remote micro frontends.

Loading Remote Modules is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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?

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.

Frequently asked questions

Is the “Loading Remote Modules” lesson free?

Yes — the full text of “Loading Remote Modules” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

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