Condividere le dipendenze

Se l'host e tre remote includessero ciascuno una propria copia di Angular, il browser scaricherebbe Angular quattro volte e, cosa ancora peggiore, si ritroverebbe con più istanze di Angular che compromettono la dependency injection. La condivisione garantisce che una sola copia venga caricata una volta e riutilizzata da tutti.

In federation.config.js, l'oggetto shared dichiara quali dipendenze vengono condivise tra host e remote. Native Federation elimina i duplicati a runtime.

shareAll() condivide con un'unica configurazione tutte le dipendenze presenti in package.json, costituendo un punto di partenza comune. In seguito può sovrascrivere i singoli pacchetti.

singleton: true impone esattamente una sola istanza di un pacchetto nell'intera app. Angular core, RxJS e il router DEVONO essere singleton; due copie di @angular/core generano due alberi di injector e causano errori a runtime.

Quando i remote richiedono versioni diverse, la federation ne sceglie una compatibile. strictVersion: true genera un errore in caso di incompatibilità invece di caricare silenziosamente una versione non corrispondente, facendo emergere subito i problemi.

Anche una libreria condivisa di design system o autenticazione dovrebbe essere un singleton, così lo stato, ad esempio l'utente corrente, rimane coerente. La condivida esplicitamente indicando il nome.

requiredVersion: 'auto' legge la versione da package.json, evitando di inserirla manualmente. In questo modo la configurazione rimane sincronizzata quando aggiorna le dipendenze.

Ogni build genera metadati sui propri pacchetti condivisi. Al momento del caricamento, la federation confronta le versioni tra host e remote e fornisce un unico modulo condiviso tramite l'import map, così il browser lo scarica una sola volta.

Dimenticare di condividere Angular è l'errore classico: l'app sembra funzionare, poi genera errori poco chiari come "NG0203: inject() must be called from an injection context" perché sono presenti due copie di Angular. Condividere Angular come singleton previene il problema.

Le distribuzioni indipendenti possono divergere. I team dovrebbero concordare un intervallo di versioni condiviso per i pacchetti del framework e aggiornarli in modo coordinato, perché un host con Angular 18 non può condividere in sicurezza con un remote che richiede Angular 17.

In alcuni casi un remote ha bisogno di una propria copia isolata di una piccola utility. Può escluderla dalla condivisione, così verrà inclusa privatamente nel bundle, accettando dimensioni duplicate in cambio dell'indipendenza.

Quali pacchetti devono essere singleton?

Dichiari le dipendenze shared, spesso tramite shareAll, affinché host e remote carichino una sola copia. Imposti come singleton: true il framework e le librerie con stato, come @angular/core, router, RxJS e la libreria di autenticazione; utilizzi strictVersion e requiredVersion: 'auto' per rilevare le divergenze. Dimenticare di condividere Angular causa errori di DI.