Du hast eine Single Page App in Angular erstellt und möchtest diese in deine Webseite integrieren? So zu sagen, als Inhalt einer Unterseite innerhalb deines WordPress-Websites. Das ist nicht ganz so trivial und ich musste mir auch kurz den Kopf dran zerbrechen, aber ich habe eine Lösung gefunden und den möchte ich nun mit dir teilen.

Das funktioniert übrigens nicht nur mit WordPress, sondern mit allen Arten von Webseiten.

Kleiner Hinweis: in diesem Post beziehe ich mich eher auf kleine Micro-Anwendungen (bspw. ein kleiner Rechner, Konfigurator, o.ä.). Für größere, komplexe Anwendungen ist das eher ungeeignet. Da macht es vermutlich mehr Sinn, die Anwendung auf einem Subdomain oder Unterordner zu installieren.

Das Problem

Es fängt grundsätzlich schon da an, dass WordPress und Angular komplett unterschiedliche Architekturen haben, die sich nicht wirklich miteinander kombinieren lassen.

In WordPress kannst du zwar eine Seite erstellen, du kannst aber deine Angular App nicht einfach als Seiteninhalt einsetzen. Das funktioniert nicht, weile eine kompilierte Angular App aus mehreren Files, JavaScript Bundles, CSS, usw. besteht.

Mein erster Ansatz: Angular-App in Iframe laden

  1. Nach dem Build hast du in deinem Angular Projekt-Ordner einen Unterordner namens „dist“
  2. Den Inhalt kopierst du in einer neuen Order auf deinem WordPress-Server, der wird dann bspw. über https://www.deineseite.de/angular-app erreichbar.
  3. Nun bindest du das Iframe mit folgendem HTML-Code in deiner Seite:
<iframe src="/angular-app" id="angular-app" style="border:0; width: 100%; height: 300px"></iframe>

Höhe und sonstige Styles kannst du natürlich einstellen, da kommen wir aber auch schon zum ersten Problem: die Höhe ist statisch. Das heißt, wenn innerhalb deiner App neue Inhalte angezeigt werden und dadurch der Inhalt länger wird, dann erscheint links der hässliche und nervige Scrollbalken. Niemand mag Srollbalken mitten auf der Seite.

Iframe mit variabler Höhe

Jetzt wirds tricky. WordPress weiß nämlich nicht, wie hoch der Inhalt deines Iframes ist. Und der „Innere“ des Iframes kann die eigene „äußere“ Höhe nicht ändern.

Was aber geht, ist, dass das Hauptfenster mit dem Iframe Daten austauscht.

Nach dem Laden der App muss also die Angular App dem „Parent“ mitteilen, „hey, ich bin gerade 549 Pixel groß!“. Das Hauptfenster kann diese Information entgegennehmen und damit die Höhe ändern.

Das können wir selbstverständlich jedes Mal wiederholen, wenn sich die innere Iframe-Höhe ändert.

Das tun wir mit Javascript.

Code

/* 
* Ok, ich bin noch nicht ganz so weit, sorry. 🙈
* Ich gebe zu, ich habe den Post frühzeitig online gestellt, damit ich sehe, ob es überhaupt jemanden interessiert. 
* Wenn du den Code dafür haben möchtest, dann kann ich dir den gerne kostenlos zuschicken.
* Schreib mir einfach eine kurze Nachricht: peter.bagi at gmail . com 
*/