Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Micro Frontends with Modern Angular

Micro Frontends with Modern Angular

Manfred Steyer

September 27, 2023
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers:

    [], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, });
  2. @ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers:

    [], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, }); customElements.define('mfe2-root', webCmp);
  3. @ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers:

    [], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, }); customElements.define('mfe2-root', webCmp); // Usage: <mfe2-root></mfe2-root>
  4. @ManfredSteyer @defer on viewport { @main { <heavy-cmp /> }

    @placeholder { <img src="ph.png"> } […] }