Angular Academy · Oppitunti

Etämoduulien lataaminen

Ladatkaa etämikrofrontendit dynaamisesti

Oppitunti 4/413 vaihetta

Etämoduulien lataaminen on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Remoten lataaminen suorituksen aikana

Kun remote tarjoaa moduulin ja host tietää sen URL-osoitteen, host lataa sen tarvittaessa komennolla loadRemoteModule. Kyseessä on dynaaminen HTTP:n kautta tehtävä tuonti: mitään remoteen liittyvää ei paketoida hostin koontiin.

loadRemoteModule-ohjelmointirajapinta

loadRemoteModule saa parametrikseen manifestista löytyvän remoten nimen ja remoten exposes-määrityksestä löytyvän tarjotun avaimen. Se palauttaa lupauksen kyseisestä moduulista.

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

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

Remote-reittien lazy loading

Selkein malli tarjoaa jokaisesta remotesta reittitiedoston ja lataa sen hostin reitittimessä lazy loading -menetelmällä komennolla loadChildren. Tällöin remote ladataan vasta, kun sen reitillä käydään.

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

Yksittäisen komponentin lataaminen

Voit myös tarjota ja ladata yksittäisen standalone-komponentin. Tämä on hyödyllistä, kun haluat upottaa widgetin kokonaisen reittialueen sijaan.

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

Tarjoaminen remoten puolella

Jotta host voi ladata moduulin, remoten on lueteltava vienti exposes-kartassaan. Avain on arvo, jonka host välittää funktiolle loadRemoteModule.

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

Manifestin dynaaminen ratkaiseminen

Koska host lukee manifestin käynnistyksen yhteydessä, voit vaihtaa remotejen URL-osoitteita ympäristökohtaisesti (kehitys, staging, tuotanto) ilman hostin uudelleenkoontia toimittamalla vain eri manifestitiedoston.

Latausvirheiden käsittely

Remotet ladataan verkon kautta, joten lataus voi epäonnistua esimerkiksi verkkoyhteyden puuttuessa tai julkaisun ollessa kesken. Käsittele latausvirheet, jotta yksi toimimaton remote ei kaada koko kuorta.

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

Tietojen välittäminen rajan yli

Hostin ja remoten välinen viestintä toteutetaan jaettujen singleton-palvelujen tai reitittimen avulla, ei suorilla tuonneilla. Jaetun auth-palvelun (singleton) avulla remote voi lukea nykyisen käyttäjän, jonka host on määrittänyt.

Versiointi ja sopimukset

Tarjottu avain (esimerkiksi ./Routes) ja sen rakenne muodostavat sopimuksen. Viennin rakenteen muuttaminen voi rikkoa sitä lataavat hostit, joten käsittele tarjottuja moduuleja julkisena ohjelmointirajapintana ja versioi niitä huolellisesti.

Esilatausstrategiat

Voit esiladata remoten heti, kun sovellus on vapautunut muusta työstä, jolloin myöhempi navigointi tapahtuu välittömästi ja alkulataus pysyy silti kevyenä. Näin tasapainotat käynnistysnopeuden ja koetun navigointinopeuden.

Päästä päähän -kulku

Kerrataan ajonaikainen kulku: host lukee manifestin, käyttäjä siirtyy federöityyn reittiin, loadRemoteModule noutaa remoten remoteEntry.json-tiedoston, jaetut singletonit käytetään uudelleen, ja remoten reitit tai komponentit renderöidään host-kuoren sisällä.

Pikatarkistus

Miten host lataa remoten ominaisuuden laiskasti?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Hostit lataavat remotesovellukset ajon aikana komennolla loadRemoteModule(name, key), yleensä laiskojen reittien loadChildren- tai loadComponent-määrityksissä. Remoten on tuotava avain näkyviin komennolla expose; manifesti ratkaisee URL-osoitteet ympäristökohtaisesti. Käsittele latausvirheet hallitusti, välitä tietoa jaettujen singletonien kautta ja käsittele näkyviin tuotuja moduuleja versioituina sopimuksina.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Etämoduulien lataaminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Etämoduulien lataaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Etämoduulien lataaminen”?

Ladatkaa etämikrofrontendit dynaamisesti Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Etämoduulien lataaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy