Micro-Frontends mit Modern Angular

Angular hat in den letzten Monaten zahlreiche neue Features bekommen, die es attraktiver für Micro-Frontends machen: Signals als Basis für Zone-less Change Detection, Standalone Components samt Unterstützung für Angular Elements oder Web Components, vereinfachtes Routing, Hydration sowie die – noch experimentelle – Unterstützung für esbuild.

In dieser Session seht ihr all diese Konzepte im Einsatz. Wir nutzen das mentale Modell von Module Federation mit esbuild auf eine Werkzeug-agnostische Weise und laden damit Web Components sowie Angular-Komponenten und Routen von separat bereitgestellten Micro-Frontends. Außerdem setzen wir auf Hydration zur Verbesserung der Startperformance.

Vorkenntnisse

• Angular-Grundlagen

Lernziele

• Signals und Standalone Components für Zone-less Angular-basierte Web Components nutzen können
  
• Micro-Frontends auf der Basis von Module Federation und Web Components bereitstellen können
  
• Hydration zur Verbesserung der Start-Performance von Micro-Frontends nutzen können