Tutorial: Setup Single-SPA mit Angular und React

von | 08.05.2021

Haben Sie schon etwas von Single-SPA gehört? Einfach gesagt handelt es sich um ein JavaScript-Metaframework, das es ermöglicht, Mikro-Frontends mit verschiedenen Frameworks zu entwickeln, die in einer einzigen Anwendung koexistieren können. In anderen Worten: mit einer Single-SPA (SPA steht für Single-Page-Application und ja, damit beinhaltet der Ausdruck Single-SPA eine offensichtliche Redundanz) besteht die Möglichkeit, Code nach Funktionalität aufzuteilen und bspw. Angular- und React in einer Applikation gemeinsam zu verwenden.

Häufig wird zu Recht empfohlen, nicht mehr als ein Framework für eine Anwendung zu verwenden. Es gibt aber durchaus Situationen, in denen Single-SPA eine gute Alternative darstellt, oder in denen es einfach Spaß macht, mehrere Frameworks zu nutzen.

Nachfolgend finden Sie ein kurzes Tutorial zum Setup einer Single-SPA mit Angular und React. Dieses Tutorial selbst habe ich mit dem Skript create-single-spa v.2.2.2 geschrieben. Um diesem Tutorial zu folgen, richten Sie Ihre Ordnerstruktur wie folgt ein:

my-first-single-spa
└─── angular-app
└─── react-app
└─── root-config

Schritt 1: Single-SPA root-config erstellen

Öffnen Sie ein neues Terminal im Stammverzeichnis Ihres Projekts (im Ordner my-first-single-spa) und führen Sie

npx create-single-spa –moduleType root-config –layout

aus. Dadurch wird ein Kommandozeilendialog gestartet, in den Sie einige Daten einfügen müssen:

- directory to create root-config: root-config
- package manager: npm
- use TypeScript: no
- organization name: org1

Mehr benötigen Sie zum Erstellen der root-config nicht. Wenn Sie nun in den Root-Config-Ordner schauen, sollten Sie die erstellten Dateien sehen.

Schritt 2: Angular-App erstellen

Die Single-SPA so zu konfigurieren, dass sie nahtlos mit Angular zusammenarbeitet, ist eine ziemliche Herausforderung. Wenn Sie aber die folgenden Schritte befolgen, sollte es relativ gut funktionieren. Öffnen Sie ein Terminal im Root-Ordner und geben Sie

npx create-single-spa --framework=angular

ein. Dadurch wird wieder ein Kommandozeilen-Dialog gestartet, den Sie mit folgenden Eigenschaften beantworten können:

- directory to create angular app: angular-app
- project name: angular-mfe
- use Angular Routing: yes
- choose stylesheet format: css
- use Angular routing (yes this is redundant but required by the CLI): yes
- use BrowserAnimationsModule: yes 

Nun müssen Sie einige Konfigurationen vornehmen, um Single-SPA und Angular zu verbinden. Navigieren Sie zunächst in Ihre neu erstellte Angular-Anwendung (hier: cd angular-app/angular-mfe) und führen Sie npm install aus. Ja, das scheint ein überflüssiger Schritt zu sein, aber Sie müssen ihn machen, da das create-single-spa-script dies nicht tut.

Danach müssen Sie das Angular-Routing konfigurieren. Öffnen Sie app-routing.module.ts und fügen Sie dem NgModule Folgendes hinzu:

providers: [{ provide: APP_BASE_HREF, useValue: '/' }]

Suchen Sie dann das Route-Array am Anfang der Datei und fügen Sie folgende Zeile dem Array hinzu:

{ path: '**', component: EmptyRouteComponent }

Wechseln Sie nun zu app.module.ts und fügen Sie EmptyRouteComponent zum declarations-Array im NgModule hinzu.

Gehen Sie nun zurück in die Root-Config und registrieren Sie die Angular-Applikation. Dazu öffnen Sie die root-config/src/index.ejs und entfernen Sie den Kommentar aus der Zeile, die zone.js importiert. In meiner Version ist dies Zeile 61. Falls Sie diese Zeile auf Anhieb nicht finden, suchen Sie einfach per STRG+f nach zone oder angular.

Suchen Sie nun nach der Import-Map für die Registrierung von Anwendungen in der index.ejs-Datei. Standardmäßig enthält diese Import-Map die Single-SPA-Begrüßungsseite, so dass Sie nach dieser Zeile suchen müssen:

"@single-spa/welcome": "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"

Registrieren Sie nun Ihre Angular-Applikation, indem Sie die folgende Eigenschaft zum Import-Objekt hinzufügen:

"@org1/angular": "http://localhost:4200/main.js"

Die finale Import-Map sollte wie folgt aussehen:

Finale Import-Map

Öffnen Sie nun die Datei microfrontend-layout.html, die sich neben index.ejs befindet, und fügen Sie unsere Angular-Applikation innerhalb des <route>-Tags ein:

<route default>
    <application name="@org1/angular"></application>
</route>

Schon ist alles eingerichtet, also schauen wir mal, ob alles wie erwartet funktioniert. Öffnen Sie ein neues Terminal und starten Sie die Root-Konfiguration, indem Sie

cd root-config
npm run start

eingeben. Natürlich müssen Sie auch die Angular-Applikation starten. Starten Sie also ein weiteres Terminal:

cd angular-app
npm run serve:single-spa:angular-mfe

Öffnen Sie Ihren Browser und rufen Sie http://localhost:9000 auf. Dort sollten Sie die Angular-Standardvorlage oder alles, was Sie in der App-Komponente angegeben haben, sehen.

Schritt 3: React-App erstellen

Wie bei root-config und Angular-application verwenden Sie wieder das create-single-spa-script.

npx create-single-spa --framework=react

Und den folgenden Kommandozeilendialog:

- directory to create angular app: react-app
- choose package manager: npm
- use TypeScript: yes
- organization name: org1
- project name: react

Natürlich müssen Sie auch die React-App registrieren. Gehen Sie also zu root-config/src/index.ejs, suchen Sie die Import-Map, in der Sie die Angular-App im vorherigen Schritt registriert haben, und fügen Sie die folgende Eigenschaft zur Import-Map hinzu:

"@org1/react": "http://localhost:8080/org1-react.js"

Damit die React-App funktioniert, müssen Sie die React-Abhängigkeiten als gemeinsame Abhängigkeiten angeben. Dazu müssen Sie eine weitere Import-Map in der index.ejs platzieren. Da Single-SPA standardmäßig geteilte Abhängigkeiten kennt, können Sie einfach nach einer Zeile suchen, die wie folgt aussieht:

"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",

Nachdem Sie die Zeile gefunden haben, fügen Sie react und react-dom als gemeinsame Abhängigkeiten hinzu, indem Sie diese beiden Eigenschaften nach der Single-SPA-Abhängigkeit benennen:

"react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js"

Schließlich müssen Sie die React-App auch im Markup bekannt machen. Öffnen Sie microfrontend-layout.html und fügen Sie die React-App ein, wie Sie es bereits bei der Angular-App gemacht haben. Das Endergebnis sollte wie folgt aussehen:

<route default>
	<application name="@org1/angular"></application>
	<application name="@org1/react"></application>
</route>
Starten Sie die React-App, indem Sie npm run start in einem anderen Terminal ausführen. Aktualisieren Sie localhost:9000 und fortan sollten Sie eine Angular-Applikation sehen, die neben einer React-App koexistiert.

Hat alles wie beschrieben geklappt? Haben Sie Anmerkungen oder Fragen? Melden Sie sich gerne bei mir oder hinterlassen Sie einfach einen Kommentar.

 

Hinweise:

Interessieren Sie sich für weitere Tipps aus der Praxis? Testen Sie unseren wöchentlichen Newsletter mit interessanten Beiträgen, Downloads, Empfehlungen und aktuellem Wissen.

Hier finden Sie weitere Informationen über Single-SPA, FAQ, Dokumente und auch Tutorials.

Mark Heimer hat zwei weitere Beiträge im t2informatik Blog veröffentlicht:

t2informatik Blog: App-Entwicklung mit NativeScript

App-Entwicklung mit NativeScript

t2informatik Blog: Smartphone-Anwendungen mit Flutter erstellen

Smartphone-Anwendungen mit Flutter erstellen

Mark Heimer
Mark Heimer

Mark Heimer ist bei t2informatik als Junior-Entwickler tätig. Zuvor hat er Informatik an der Hochschule für Wirtschaft und Recht in Berlin studiert. Über einige seiner Erfahrungen schreibt er hier im Blog.