Angular Academy · Lezione

Caricare moduli remoti

Caricare dinamicamente i micro frontend remoti

Caricare moduli remoti è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 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.

Caricare un remote a runtime

Quando un remote espone un modulo e l'host ne conosce l'URL, l'host lo carica on demand con loadRemoteModule. Si tratta di un'importazione dinamica via HTTP: nulla del remote viene incluso nella build dell'host.

API loadRemoteModule

loadRemoteModule accetta il nome del remote, ricavato dal manifest, e la chiave esposta, ricavata da exposes del remote. Restituisce una promise relativa a quel modulo.

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

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

Lazy loading delle route remote

Il pattern più pulito consiste nell'esporre un file di route da ogni remote e caricarlo in modo lazy nel router dell'host con loadChildren, così il remote viene caricato solo quando si visita la relativa route.

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

Caricare un singolo componente

È inoltre possibile esporre e caricare un singolo componente standalone, utile per incorporare un widget invece di un'intera area di route.

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

Esposizione dal lato remote

Per poter essere caricato dall'host, il remote deve elencare l'export nella propria mappa exposes. La chiave è il valore che l'host passa a loadRemoteModule.

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

Risoluzione dinamica del manifest

Poiché l'host legge il manifest all'avvio, può sostituire gli URL dei remote in base all'ambiente, ad esempio sviluppo, staging o produzione, senza ricostruire l'host: è sufficiente distribuire un file manifest diverso.

Gestire gli errori di caricamento

I remote vengono caricati tramite la rete e possono non riuscire a caricarsi, ad esempio quando si è offline o durante una distribuzione. Racchiuda i caricamenti in una gestione degli errori, così un singolo remote non funzionante non manda in crash l'intera shell.

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

Passare dati oltre il confine

La comunicazione tra host e remote utilizza servizi singleton condivisi o il router, non importazioni dirette. Un servizio di autenticazione condiviso (singleton) consente a un remote di leggere l'utente corrente impostato dall'host.

Versionamento e contratti

La chiave esposta, ad esempio ./Routes, e la sua struttura formano un contratto. Modificare la struttura dell'export può compromettere gli host che lo caricano; tratti quindi i moduli esposti come un'API pubblica e li sottoponga a versionamento con attenzione.

Strategie di precaricamento

Può precaricare eager un remote dopo che l'app è rimasta inattiva, rendendo istantanea la navigazione successiva e mantenendo comunque leggero il caricamento iniziale. In questo modo bilancia la velocità di avvio con quella di navigazione percepita.

Flusso end-to-end

Per ricapitolare il percorso a runtime: l'host legge il manifest, l'utente raggiunge una route federata, loadRemoteModule recupera il remoteEntry.json del remote, i singleton condivisi vengono riutilizzati e le route o il componente del remote vengono renderizzati all'interno del guscio dell'host.

Verifica rapida

In che modo un host carica un' funzionalità remote in modo lazy?

Riepilogo

Gli host caricano i remote a runtime con loadRemoteModule(name, key), in genere all'interno di loadChildren/loadComponent per le route lazy. I remote devono expose la chiave; il manifest risolve gli URL in base all'ambiente. Gestisca correttamente gli errori di caricamento, comunichi tramite singleton condivisi e tratti i moduli esposti come contratti versionati.

Domande Frequenti

La lezione «Caricare moduli remoti» è gratuita?

Sì — il testo completo di «Caricare moduli remoti» è 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 «Caricare moduli remoti»?

Caricare dinamicamente i micro frontend remoti 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 4 di 4.

Quanto tempo richiede la lezione «Caricare moduli remoti»?

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