Angular Academy · Leçon

Charger des modules distants

Chargez dynamiquement des micro frontends distants

Charger des modules distants est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Charger un élément distant à l'exécution

Une fois qu'un élément distant expose un module et que l'hôte connaît son URL, l'hôte le charge à la demande avec loadRemoteModule. Il s'agit d'un import dynamique via HTTP : rien de l'élément distant n'est intégré à la compilation de l'hôte.

API loadRemoteModule

loadRemoteModule reçoit le nom de l'élément distant (provenant du manifeste) et la clé exposée (provenant de exposes dans l'élément distant). Il renvoie une promesse contenant ce module.

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

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

Chargement différé des routes distantes

Le modèle le plus propre consiste à exposer un fichier de routes depuis chaque élément distant et à le charger paresseusement dans le routeur hôte avec loadChildren, afin que l'élément distant ne soit chargé que lorsque sa route est consultée.

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

Charger un composant unique

Vous pouvez également exposer et charger un composant autonome individuel, ce qui est utile pour intégrer un widget plutôt qu'une zone entière de routes.

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

Exposer du côté de l'élément distant

Pour que l'hôte puisse le charger, l'élément distant doit répertorier l'exportation dans sa carte exposes. La clé correspond à ce que l'hôte transmet à loadRemoteModule.

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

Résolution dynamique du manifeste

Comme l'hôte lit le manifeste au démarrage, vous pouvez remplacer les URL des éléments distants selon l'environnement (développement, préproduction, production) sans recompiler l'hôte, en fournissant simplement un autre fichier manifeste.

Gérer les échecs de chargement

Les éléments distants sont chargés via le réseau et peuvent échouer (hors ligne, déploiement en cours). Entourez les chargements d'une gestion des erreurs afin qu'un seul élément distant défaillant ne fasse pas tomber toute la coquille.

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

Transmettre des données au-delà de la frontière

La communication entre l'hôte et l'élément distant utilise des services singleton partagés ou le routeur, et non des imports directs. Un service d'authentification partagé (singleton) permet à un élément distant de lire l'utilisateur actuel défini par l'hôte.

Gestion des versions et contrats

La clé exposée (par exemple ./Routes) et sa structure forment un contrat. Modifier la structure de l'exportation peut casser les hôtes qui la chargent : traitez donc les modules exposés comme une API publique et gérez soigneusement leurs versions.

Stratégies de préchargement

Vous pouvez précharger activement un élément distant lorsque l'application est inactive afin de rendre instantanée une navigation ultérieure, tout en conservant un chargement initial léger. Cela permet d'équilibrer la vitesse de démarrage et la vitesse de navigation perçue.

Flux de bout en bout

Pour récapituler le chemin d’exécution : l’hôte lit le manifeste, l’utilisateur accède à une route fédérée, loadRemoteModule récupère le remoteEntry.json du module distant, les singletons partagés sont réutilisés, puis les routes et composants du module distant sont rendus dans l’enveloppe de l’hôte.

Vérification rapide

Comment un hôte charge-t-il paresseusement une fonctionnalité distante ?

Récapitulatif

Les hôtes chargent les modules distants à l’exécution avec loadRemoteModule(name, key), généralement dans loadChildren/loadComponent pour les routes chargées paresseusement. Les modules distants doivent expose la clé ; le manifeste résout les URL selon l’environnement. Gérez les échecs de chargement avec élégance, communiquez via des singletons partagés et considérez les modules exposés comme des contrats versionnés.

Questions Fréquemment Posées

La leçon « Charger des modules distants » est-elle gratuite ?

Oui — le texte complet de « Charger des modules distants » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Charger des modules distants » ?

Chargez dynamiquement des micro frontends distants Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Charger des modules distants » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy