Angular Academy · Oppitunti

Natiivifederointi Angularissa

Määrittäkää moduulien federointi Angularissa

Oppitunti 2/413 vaihetta

Natiivifederointi Angularissa on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

Miksi Native Federation

Klassinen Module Federation oli sidottu webpackiin. Angularin koontijärjestelmä siirtyi käyttämään esbuildia, joten yhteisö loi Native Federationin: samalle idealle perustuvan, koontityökalusta riippumattoman toteutuksen, joka käyttää verkkostandardeja (import mappeja ja ES-moduuleja).

Paketti

Angularin Native Federation sijaitsee paketissa @angular-architects/native-federation. Lisää se Angular CLI:n schematic-toiminnolla, joka määrittää asetukset ja koontiprosessin.

ng add @angular-architects/native-federation

Hostin alustaminen

Suorita schematic-toiminto kuorisovellukselle ja valitse dynamic-host. Se luo tiedoston federation.config.js ja päivittää käynnistyksen alustamaan federationin ennen Angularin käynnistymistä.

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

Remoten alustaminen

Suorita ominaisuussovellukselle sama alustus valinnalla remote. Tämä luo asetukset, joilla remoten osia voidaan tarjota hosteille.

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

Tiedosto federation.config.js

Tämä asetustiedosto on federationin ydin: siinä nimetään remote, luetellaan sen exposes-määritykset ja ilmoitetaan shared-riippuvuudet.

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

Käynnistyksen muutokset

Native Federation edellyttää alustamista ennen käynnistystä, jotta import mapit ovat valmiina. Schematic-toiminto jakaa tiedoston main.ts init-vaiheeseen, joka lataa tiedoston bootstrap.ts.

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

Remotejen luetteleminen hostissa

Host ylläpitää manifestia, joka yhdistää remotejen nimet niiden remoteEntry.json-URL-osoitteisiin. Näin se tietää, mistä kukin remote ladataan suorituksen aikana.

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

Manifestin lataaminen

Välitä manifestin polku funktiolle initFederation. Host lukee sen kerran käynnistyksen yhteydessä ja voi sen jälkeen ladata minkä tahansa siinä luetellun remoten tarvittaessa.

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

Standardeihin perustuva, ei webpackiin sidottu

Koska Native Federation käyttää natiiveja ES-moduuleja ja import mappeja, se toimii esbuildin, Viten ja muiden bundlereiden kanssa. Tämä irtikytkentä on syy siihen, miksi siitä tuli suositeltu lähestymistapa modernissa Angularissa.

Kehityspalvelimet joka remotelle

Kehityksen aikana jokainen remote toimii omassa portissaan (ng serve --port 4201). Host käyttää manifestin kautta näitä URL-osoitteita, joten koko koosteen voi suorittaa paikallisesti.

Native Federationin hyödyt

Lyhyesti: itsenäiset koonnit, jaetut singletonit (yksi Angular-instanssi), remotejen dynaaminen lataaminen ja riippumattomuus tietystä bundlerista. Seuraavissa oppitunneissa käsitellään riippuvuuksien jakamista ja remote-moduulien lataamista yksityiskohtaisesti.

Pikatarkistus

Miksi Angularissa kannattaa käyttää Native Federationia klassisen Module Federationin sijaan?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Native Federation (@angular-architects/native-federation) tuo module federationin import mappeja käyttävään esbuild-pohjaiseen Angulariin. Alusta hostit ja remotet schematic-toiminnolla, määritä exposes ja shared tiedostossa federation.config.js, kutsu initFederation-funktiota ennen käynnistystä ja luettele remotet manifestissa.

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 ”Natiivifederointi Angularissa” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Natiivifederointi Angularissa”. 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 ”Natiivifederointi Angularissa”?

Määrittäkää moduulien federointi Angularissa 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 2/4.

Kuinka kauan ”Natiivifederointi Angularissa”-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