🧩 Angular Plugin-Architektur – Wie du deine App erweiterbar machst

Große Angular-Projekte wachsen – und brauchen Flexibilität.
Mit einer Plugin-Architektur machst du deine App modular, dynamisch und teamfähig.

🚀 Warum Plugins?

• Dynamische Feature-Erweiterung
• Trennung von Core vs. Extensions
• Teams können unabhängig arbeiten
• 💡 Beispiel: Versicherungsrechner, Module, Widgets, CMS-Seiten

🧱 Architektur-Ansatz

📦 app/
┣ 📂 core/
┃ ┣ 📄 app.component.ts
┃ ┗ 📄 app.routes.ts
┣ 📂 plugins/
┃ ┣ 📂 angebot/
┃ ┃ ┗ 📄 angebot.plugin.ts
┃ ┣ 📂 vertragsdaten/
┃ ┃ ┗ 📄 vertragsdaten.plugin.ts
┃ ┗ 📄 plugin-registry.ts

🧠 So funktioniert’s

1. Plugin-Schnittstelle definieren

export interface Plugin {
  route: Route;
  label: string;
}

2. Plugins als eigene Libraries oder Verzeichnisse
3. Zur Laufzeit in die App-Routen integrieren
   → Plugin Registry als InjectionToken

🧪 Beispiel: PluginRegistry

export const PLUGIN_REGISTRY = new InjectionToken<Plugin[]>('PluginRegistry');

export const PLUGINS: Plugin[] = [
  angebotPlugin,
  vertragsdatenPlugin,
];

➡ kann dynamisch aus einem Backend kommen

🌐 Dynamisches Routing

export const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  ...PLUGINS.map(p => p.route),
];

✅ Vorteile

• Modularität & Erweiterbarkeit
• Feature-Toggle-ready
• Perfekt für B2B, White-Label oder CMS-Architektur

📍 Bald im Blog:
🧠 Angular Content Projection – Wie du maximale Flexibilität im UI erreichst