Angular Academy · Leçon

Partager les dépendances

Partagez Angular et les bibliothèques entre les applications distantes

Partager les dépendances est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 partager les dépendances

Si l'hôte et trois éléments distants intègrent chacun leur propre copie d'Angular, le navigateur télécharge Angular quatre fois et, pire encore, se retrouve avec plusieurs instances d'Angular qui cassent l'injection de dépendances. Le partage garantit qu'une seule copie est chargée une fois puis réutilisée par tous.

La section shared

Dans federation.config.js, l'objet shared déclare les dépendances partagées entre l'hôte et les éléments distants. Native Federation les déduplique à l'exécution.

module.exports = withNativeFederation({
  shared: {
    ...shareAll({ singleton: true, strictVersion: true }),
  },
});

Assistant shareAll

shareAll() partage toutes les dépendances de votre package.json avec une seule configuration, ce qui constitue le point de départ habituel. Vous pouvez ensuite remplacer la configuration de certains paquets.

shared: {
  ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}

singleton : pourquoi est-ce important pour Angular

singleton: true impose exactement une instance d'un paquet dans toute l'application. Le cœur d'Angular, RxJS et le routeur DOIVENT être des singletons : deux copies de @angular/core signifient deux arborescences d'injecteurs et des erreurs à l'exécution.

Négociation des versions

Lorsque les éléments distants demandent des versions différentes, la fédération en choisit une qui est compatible. strictVersion: true lève une erreur en cas d'incompatibilité au lieu de charger silencieusement une version inadéquate, ce qui fait apparaître les problèmes rapidement.

shared: {
  '@angular/core': { singleton: true, strictVersion: true, requiredVersion: '^18.0.0' },
}

Partager vos propres bibliothèques

Une bibliothèque de système de conception ou d'authentification partagée devrait également être un singleton afin que son état (tel que l'utilisateur actuel) reste cohérent. Partagez-la explicitement par son nom.

shared: {
  '@myorg/design-system': { singleton: true, requiredVersion: 'auto' },
  '@myorg/auth': { singleton: true },
}

requiredVersion : auto

requiredVersion: 'auto' lit la version depuis votre package.json afin que vous n'ayez pas à la coder en dur. La configuration reste ainsi synchronisée lorsque vous mettez à niveau vos dépendances.

Ce qui se passe à l'exécution

Chaque compilation produit des métadonnées sur ses paquets partagés. Au moment du chargement, la fédération compare les versions entre l'hôte et les éléments distants et fournit un module partagé via la carte d'importation, afin que le navigateur ne le récupère qu'une seule fois.

Le coût de l'absence de partage

Oublier de partager Angular est l'erreur classique : l'application semble fonctionner, puis lève des erreurs cryptiques comme « NG0203: inject() must be called from an injection context » parce que deux copies d'Angular existent. Le partage en tant que singleton évite ce problème.

Maintenir les versions alignées

Les déploiements indépendants peuvent diverger. Les équipes devraient se mettre d'accord sur une plage de versions partagée pour les paquets du framework et effectuer les mises à niveau de manière coordonnée, car un hôte sous Angular 18 ne peut pas partager sans risque avec un élément distant nécessitant Angular 17.

Ne pas partager un paquet

Il arrive qu'un élément distant ait besoin de sa propre copie isolée d'un petit utilitaire. Vous pouvez l'exclure du partage afin qu'il soit intégré localement, en acceptant la taille du doublon en échange de l'indépendance.

shared: {
  ...shareAll({ singleton: true }),
}
// skip a package by removing it from the shared map / excluding it

Vérification rapide

Quels paquets doivent être des singletons ?

Récapitulatif

Déclarez les dépendances shared (souvent avec shareAll) afin que l'hôte et les éléments distants chargent une seule copie. Faites des bibliothèques du framework et des bibliothèques avec état (@angular/core, le routeur, RxJS, votre bibliothèque d'authentification) des singleton: true ; utilisez strictVersion et requiredVersion: 'auto' pour détecter les divergences. Oublier de partager Angular provoque des erreurs de DI.

Questions Fréquemment Posées

La leçon « Partager les dépendances » est-elle gratuite ?

Oui — le texte complet de « Partager les dépendances » 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 « Partager les dépendances » ?

Partagez Angular et les bibliothèques entre les applications distantes 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 3 sur 4.

Combien de temps prend la leçon « Partager les dépendances » ?

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