Angular Academy · Lezione

Native Federation per Angular

Configurare la federazione dei moduli in Angular

Native Federation per Angular è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Perché Native Federation

La Module Federation classica era legata a webpack. Il sistema di build di Angular è passato a esbuild, perciò la community ha creato Native Federation: un'implementazione della stessa idea indipendente dallo strumento di build e basata su standard web, ovvero import map e moduli ES.

Il pacchetto

Native Federation per Angular si trova in @angular-architects/native-federation. Lo aggiunga con lo schematic della CLI Angular, che configura automaticamente la configurazione e il processo di build.

ng add @angular-architects/native-federation

Inizializzazione di un host

Esegua lo schematic sull'app shell e scelga dynamic-host. Verrà generato un federation.config.js e il bootstrap verrà aggiornato per inizializzare la federation prima dell'avvio di Angular.

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

Inizializzazione di un remote

Per un'app funzionale, esegua la stessa inizializzazione con remote. Verrà creata la configurazione che espone parti del remote agli host.

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

Il file federation.config.js

Questa configurazione è il cuore della federation: assegna un nome al remote, elenca ciò che exposes ed esplicita le dipendenze shared.

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

Modifiche al bootstrap

Native Federation richiede l'inizializzazione prima del bootstrap, così le import map sono già pronte. Lo schematic divide main.ts in un passaggio di inizializzazione che carica bootstrap.ts.

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

Elencare i remote nell'host

L'host conserva un manifest che associa i nomi dei remote all'URL del rispettivo remoteEntry.json, così sa dove recuperare ogni remote a runtime.

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

Caricamento del manifest

Passi il percorso del manifest a initFederation. L'host lo legge una volta all'avvio, dopodiché può caricare on demand qualsiasi remote elencato.

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

Basato sugli standard, non vincolato a webpack

Poiché Native Federation utilizza moduli ES nativi e import map, funziona con esbuild, Vite e altri bundler. Questo disaccoppiamento spiega perché sia diventato l'approccio consigliato per Angular moderno.

Server di sviluppo per ogni remote

Durante lo sviluppo, ogni remote viene eseguito sulla propria porta (ng serve --port 4201). L'host utilizza il manifest per puntare a questi URL, permettendo di eseguire localmente l'intera composizione.

Che cosa offre Native Federation

In sintesi: build indipendenti, singleton condivisi (una sola istanza di Angular), caricamento dinamico dei remote e nessun vincolo a un bundler specifico. Nelle lezioni successive verranno trattati in dettaglio la condivisione delle dipendenze e il caricamento dei moduli remote.

Verifica rapida

Perché scegliere Native Federation invece della Module Federation classica in Angular?

Riepilogo

Native Federation (@angular-architects/native-federation) porta la module federation in Angular basato su esbuild utilizzando le import map. Inizializzi host e remote con lo schematic, configuri exposes e shared in federation.config.js, chiami initFederation prima del bootstrap ed elenchi i remote in un manifest.

Domande Frequenti

La lezione «Native Federation per Angular» è gratuita?

Sì — il testo completo di «Native Federation per Angular» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Native Federation per Angular»?

Configurare la federazione dei moduli in Angular Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Native Federation per Angular»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy