Angular Academy · Leçon

Fédération native pour Angular

Configurez la fédération de modules dans Angular

Fédération native pour Angular est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Pourquoi Native Federation

Le Module Federation classique était lié à webpack. Le système de compilation d'Angular est passé à esbuild, ce qui a conduit la communauté à créer Native Federation : une implémentation de la même idée indépendante de l'outil de compilation, fondée sur les standards du Web (cartes d'importation et modules ES).

Le paquet

Native Federation pour Angular se trouve dans @angular-architects/native-federation. Ajoutez-le avec le schéma du CLI Angular, qui configure la configuration et le processus de compilation.

ng add @angular-architects/native-federation

Initialiser un hôte

Exécutez le schéma sur l'application coquille et choisissez dynamic-host. Il génère un fichier federation.config.js et met à jour le démarrage afin d'initialiser la fédération avant le démarrage d'Angular.

ng g @angular-architects/native-federation:init --project shell --type dynamic-host

Initialiser un élément distant

Pour une application fonctionnelle, exécutez la même initialisation avec remote. Cela crée la configuration qui expose des parties de l'élément distant aux hôtes.

ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201

Le fichier federation.config.js

Cette configuration est au cœur de la fédération : elle nomme l'élément distant, répertorie ce qu'il exposes et déclare les dépendances shared.

// catalog/federation.config.js
module.exports = withNativeFederation({
  name: 'catalog',
  exposes: { './Routes': './src/app/catalog.routes.ts' },
  shared: { ...shareAll({ singleton: true }) },
});

Modifications du démarrage

Native Federation exige une initialisation avant le démarrage afin que les cartes d'importation soient prêtes. Le schéma divise main.ts en une étape d'initialisation qui charge bootstrap.ts.

// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
  .then(() => import('./bootstrap'))
  .catch(err => console.error(err));

Répertorier les éléments distants dans l'hôte

L'hôte conserve un manifeste associant les noms des éléments distants à leur URL remoteEntry.json, afin de savoir où récupérer chaque élément distant à l'exécution.

// federation.manifest.json
{
  "catalog": "http://localhost:4201/remoteEntry.json"
}

Charger le manifeste

Transmettez le chemin du manifeste à initFederation. L'hôte le lit une seule fois au démarrage, puis peut charger à la demande n'importe quel élément distant répertorié.

initFederation('/assets/federation.manifest.json')
  .then(() => import('./bootstrap'));

Fondé sur les standards, et non lié à webpack

Comme Native Federation utilise des modules ES natifs et des cartes d'importation, il fonctionne avec esbuild, Vite ou d'autres regroupeurs. Ce découplage explique pourquoi il est devenu l'approche recommandée pour Angular moderne.

Un serveur de développement par élément distant

Pendant le développement, chaque élément distant s'exécute sur son propre port (ng serve --port 4201). L'hôte pointe vers ces URL via le manifeste, ce qui vous permet d'exécuter localement toute la composition.

Ce que Native Federation vous apporte

En bref : des compilations indépendantes, des singletons partagés (une seule instance d'Angular), le chargement dynamique des éléments distants et aucune dépendance à un regroupeur particulier. Les prochaines leçons détaillent le partage des dépendances et le chargement des modules distants.

Vérification rapide

Pourquoi choisir Native Federation plutôt que le Module Federation classique dans Angular ?

Récapitulatif

Native Federation (@angular-architects/native-federation) apporte la fédération de modules à Angular fondé sur esbuild, en utilisant des cartes d'importation. Initialisez les hôtes et les éléments distants avec le schéma, configurez exposes et shared dans federation.config.js, appelez initFederation avant le démarrage et répertoriez les éléments distants dans un manifeste.

Questions Fréquemment Posées

La leçon « Fédération native pour Angular » est-elle gratuite ?

Oui — le texte complet de « Fédération native pour Angular » 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 « Fédération native pour Angular » ?

Configurez la fédération de modules dans Angular 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 2 sur 4.

Combien de temps prend la leçon « Fédération native pour Angular » ?

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