V predchádzajúci článok z tejto série som ukázal, ako používať Webpack Module Federation na načítanie oddelene kompilovaných mikro frontend do shellu. Pretože konfigurácia webpacku shellu popisuje mikroobchody, už sme ich potrebovali vedieť pri jeho zostavovaní.
V tomto článku predpokladám dynamickejšiu situáciu, keď škrupina teraz neobsahuje microfrontends alebo dokonca ich počet vopred. Namiesto toho sú tieto informácie poskytované za behu prostredníctvom vyhľadávacej služby.
Nasledujúci obrázok zobrazuje túto myšlienku:
U všetkých mikro frontendov, o ktorých shell dostane informácie za behu, zobrazí položku ponuky. Po kliknutí na ňu sa microfrontend načíta a zobrazí router routeru.
ako nájsť odstránený tweet
Ako obvykle, zdrojový kód použité tu nájdete v mojom Účet GitHub .
Zrieknutie sa zodpovednosti: Module Federation je úplne nová technológia, ktorá sa dodáva s balíkom webpack 5 (v súčasnosti je v beta verzii). Aby to už dnes fungovalo s Angular, používam opravenú verziu CLI, ktorá nie je určená na produkciu, ako aj vlastnú konfiguráciu webpacku. Keď bude webpack 5 konečný a CLI ho podporuje, toto všetko už nebude potrebné.
Konfigurácia federácie modulu
Začnime konfiguráciou federácie modulov shellu. V tomto prípade je to také jednoduché:
new ModuleFederationPlugin({ remotes: {}, shared: ['@angular/core', '@angular/common', '@angular/router'] }), Nedefinujeme vopred žiadne diaľkové ovládače (microfrontends), ale konfigurujeme balíky, ktoré chceme zdieľať s diaľkovými ovládačmi, o ktorých sme informovaní za behu.
Konfigurácia mikro frontendov však vyzerá ako v predchádzajúcom článku:
new ModuleFederationPlugin({ name: 'mfe1', library: { type: 'var', name: 'mfe1' }, filename: 'remoteEntry.js', exposes: { Module: './projects/mfe1/src/app/flights/flights.module.ts' }, shared: ['@angular/core', '@angular/common', '@angular/router'] }), Načítavanie mikro frontendov za behu
Na načítanie mikro frontendov za behu potrebujeme niekoľko pomocných funkcií, ktoré sa zaoberajú aspektmi nízkej úrovne.
Ak vás tieto podrobnosti nezaujímajú, môžete tiež túto časť preskočiť a použiť | _+_ | fungovať ako a čierna krabica . Všetko, čo k tomu potrebujete, nájdete v uvedenom príklade v súbore federation-utils.ts môžete skopírovať do svojho projektu.
Prvá pomocná funkcia, na ktorú sa tu pozeráme, sa nazýva | _+_ |. Implementuje jednoduchý zavádzač skriptov na načítanie vzdialeného vstupného bodu microfrontend:
loadRemoteModule#unkategorisiert #angular
vertcoin ledger nano s
www.angulararchitects.io
Federácia dynamických modulov s uhlom (revolúcia Microfrontend, časť 3)
Federácia dynamických modulov s uhlom (revolúcia Microfrontend, časť 3). Načítava sa mikro frontend, ktorý nie je v čase kompilácie známy.