Erfahren Sie, wie der Quell-Code für eine in Angular geschriebene Single Page Application (SPA) in ein Adobe Experience Manager (AEM)-Projekt integriert werden kann. Finden Sie heraus, wie Sie mit modernen Frontend-Tools wie einem webpack-Dev-Server die SPA schnell für die AEM-JSON-Modell-API entwickeln können.
In diesem Kapitel wird beschrieben, wie der SPA eine einfache Header
-Komponente hinzugefügt wird. Während der Erstellung dieser statischen Header
-Komponente werden verschiedene Ansätze für die AEM-SPA-Entwicklung verwendet.
Die SPA wird um eine statische Header
-Komponente erweitert.
Vergegenwärtigen Sie sich die erforderlichen Tools und Anweisungen zum Einrichten einer lokalen Entwicklungsumgebung.
Laden Sie den Ausgangspunkt für dieses Tutorial über Git herunter:
$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/integrate-spa-start
Stellen Sie die Code-Basis mithilfe von Maven in einer lokalen AEM-Instanz bereit:
$ mvn clean install -PautoInstallSinglePackage
Fügen Sie bei Verwendung von AEM 6.x das Profil classic
hinzu:
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Sie können den fertigen Code jederzeit auf GitHub ansehen oder den Code lokal auschecken, indem Sie zur Verzweigung Angular/integrate-spa-solution
wechseln.
Im Rahmen des AEM-Projekts wurden zwei Module erstellt: ui.apps
und ui.frontend
.
Das Modul ui.frontend
ist ein webpack-Projekt, das den gesamten SPA-Quellcode enthält. Ein Großteil der SPA-Entwicklung und -Tests erfolgt im webpack-Projekt. Wenn ein Produktions-Build ausgelöst wird, wird die SPA mithilfe von webpack erstellt und kompiliert. Die kompilierten Artefakte (CSS und JavaScript) werden in das Modul ui.apps
kopiert, das dann für die AEM-Runtime bereitgestellt wird.
Eine Darstellung der SPA-Integration auf hoher Ebene.
Weitere Informationen zum Frontend-Build finden Sie hier.
Überprüfen Sie anschließend das Modul ui.frontend
, um die automatisch vom AEM-Projektarchetyp erstellte SPA zu verstehen.
Öffnen Sie in der IDE Ihrer Wahl das AEM-Projekt für die WKND-SPA. In diesem Tutorial wird die Visual Studio Code-IDE verwendet.
Erweitern und überprüfen Sie den Ordner ui.frontend
. Öffnen Sie die Datei ui.frontend/package.json
Unter dependencies
sollten mehrere @angular
-Abhängigkeiten zu sehen sein:
"@angular/animations": "~9.1.11",
"@angular/common": "~9.1.11",
"@angular/compiler": "~9.1.11",
"@angular/core": "~9.1.11",
"@angular/forms": "~9.1.10",
"@angular/platform-browser": "~9.1.10",
"@angular/platform-browser-dynamic": "~9.1.10",
"@angular/router": "~9.1.10",
Das Modul ui.frontend
ist eine Angular-Anwendung, die mithilfe des Angular-Befehlszeilen-Tools (Command Line Interface, CLI) erstellt wurde und Routing-Funktionen umfasst.
Es sind auch drei @adobe
-Abhängigkeiten vorhanden:
"@adobe/cq-angular-editable-components": "^2.0.2",
"@adobe/cq-spa-component-mapping": "^1.0.3",
"@adobe/cq-spa-page-model-manager": "^1.1.3",
Die oben genannten Module bilden das AEM SPA Editor JS SDK und stellen die Funktionalität bereit, mit der es möglich ist, SPA-Komponenten AEM-Komponenten zuzuordnen.
In der Datei package.json
sind unter scripts
mehrere Skripte definiert:
"scripts": {
"start": "ng serve --open --proxy-config ./proxy.conf.json",
"build": "ng lint && ng build && clientlib",
"build:production": "ng lint && ng build --prod && clientlib",
"test": "ng test",
"sync": "aemsync -d -w ../ui.apps/src/main/content"
}
Diese Skripte basieren auf gängigen Angular-Befehlszeilenbefehlen, die zur Verwendung mit dem größeren AEM-Projekt allerdings geringfügig verändert wurden.
start
führt die Angular-App lokal über einen lokalen Webserver aus. Er wurde aktualisiert, um den Inhalt der lokalen AEM-Instanz heranzuziehen.
build
kompiliert die Angular-App für die Produktionsverteilung. Durch Hinzufügen von && clientlib
wird die kompilierte SPA während eines Build-Vorgangs als Client-seitige Bibliothek in das Modul ui.apps
kopiert. Das npm-Modul aem-clientlib-generator wird verwendet, um dies zu erleichtern.
Weitere Informationen zu den verfügbaren Skripten finden Sie hier.
Überprüfen Sie die Datei ui.frontend/clientlib.config.js
. Diese Konfigurationsdatei wird von aem-clientlib-generator verwendet, um zu bestimmen, wie die Client-Bibliothek erstellt wird.
Überprüfen Sie die Datei ui.frontend/pom.xml
. Durch diese Datei wird aus dem Ordner ui.frontend
ein Maven-Modul. Die Datei pom.xml
wurde aktualisiert, um die SPA während eines Maven-Builds mithilfe von frontend-maven-plugin zu testen und zu erstellen.
Überprüfen Sie die Datei app.component.ts
unter ui.frontend/src/app/app.component.ts
:
import { Constants } from '@adobe/cq-angular-editable-components';
import { ModelManager } from '@adobe/cq-spa-page-model-manager';
import { Component } from '@angular/core';
@Component({
selector: '#spa-root', // tslint:disable-line
styleUrls: ['./app.component.css'],
templateUrl: './app.component.html'
})
export class AppComponent {
...
constructor() {
ModelManager.initialize().then(this.updateData);
}
private updateData = pageModel => {
this.path = pageModel[Constants.PATH_PROP];
this.items = pageModel[Constants.ITEMS_PROP];
this.itemsOrder = pageModel[Constants.ITEMS_ORDER_PROP];
}
}
app.component.js
ist der Einstiegspunkt der SPA. ModelManager
wird vom AEM SPA Editor JS SDK bereitgestellt. Darüber wird pageModel
(der JSON-Inhalt) aufgerufen und in die Anwendung eingefügt.
Als Nächstes fügen Sie eine neue Komponente zur SPA hinzu und stellen die Änderungen in einer lokalen AEM-Instanz bereit, um sich die Integration anzeigen zu lassen.
Öffnen Sie ein neues Terminal-Fenster und navigieren Sie zum Ordner ui.frontend
:
$ cd aem-guides-wknd-spa/ui.frontend
Installieren Sie das Angular-Befehlszeilen-Tool global, um die Angular-Komponenten zu generieren und die Angular-Anwendung mit dem Befehl ng zu erstellen und zu bedienen.
$ npm install -g @angular/cli
Die von diesem Projekt verwendete @angular/cli-Version ist 9.1.7. Es wird empfohlen, die Version des Angular-Befehlszeilen-Tools synchron zu halten.
Erstellen Sie eine neue Header
-Komponente, indem Sie den Angular-Befehlszeilenbefehl ng generate component
im Ordner ui.frontend
ausführen.
$ ng generate component components/header
CREATE src/app/components/header/header.component.css (0 bytes)
CREATE src/app/components/header/header.component.html (21 bytes)
CREATE src/app/components/header/header.component.spec.ts (628 bytes)
CREATE src/app/components/header/header.component.ts (269 bytes)
UPDATE src/app/app.module.ts (1809 bytes)
Dadurch wird ein Skelett für die neue Angular-Header-Komponente unter ui.frontend/src/app/components/header
erstellt.
Öffnen Sie das Projekt aem-guides-wknd-spa
in der IDE Ihrer Wahl. Navigieren Sie zum Ordner ui.frontend/src/app/components/header
.
Öffnen Sie die Datei header.component.html
und ersetzen Sie den Inhalt durch Folgendes:
<!--/* header.component.html */-->
<header className="header">
<div className="header-container">
<h1>WKND</h1>
</div>
</header>
Beachten Sie, dass hier statische Inhalte angezeigt werden, sodass diese Angular-Komponente keine Anpassungen an der standardmäßig generierten Datei header.component.ts
erfordert.
Öffnen Sie die Datei app.component.html unter ui.frontend/src/app/app.component.html
. Fügen Sie den app-header
hinzu:
<app-header></app-header>
<router-outlet></router-outlet>
Dieser umfasst die header
-Komponente über sämtlichem Seiteninhalt.
Öffnen Sie ein neues Terminal, navigieren Sie zum Ordner ui.frontend
und führen Sie den Befehl npm run build
aus:
$ cd ui.frontend
$ npm run build
Linting "angular-app"...
All files pass linting.
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
Navigieren Sie zum Ordner ui.apps
. Unter ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-angular
sollten Sie sehen, dass die kompilierten SPA-Dateien aus dem Ordnerui.frontend/build
kopiert wurden.
Kehren Sie zum Terminal zurück und navigieren Sie zum Ordner ui.apps
. Führen Sie den folgenden Maven-Befehl aus:
$ cd ../ui.apps
$ mvn clean install -PautoInstallPackage
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 9.629 s
[INFO] Finished at: 2020-05-04T17:48:07-07:00
[INFO] ------------------------------------------------------------------------
Dadurch wird das ui.apps
-Paket in einer lokalen aktiven AEM-Instanz bereitgestellt.
Öffnen Sie eine Browser-Registerkarte und navigieren Sie zu http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Der Inhalt der Header
-Komponente sollte nun in der SPA zu sehen sein.
Die Schritte 7–9 werden automatisch ausgeführt, wenn ein Maven-Build aus dem Stammverzeichnis des Projekts (d. h. mvn clean install -PautoInstallSinglePackage
) ausgelöst wird. Sie sollten jetzt die Grundlagen der Integration zwischen der SPA und Client-seitigen AEM-Bibliotheken verstehen. Beachten Sie, dass Sie weiterhin Text
-Komponenten in AEM bearbeiten und hinzufügen können, die Header
-Komponente aber nicht bearbeitbar ist.
Wie in den vorherigen Übungen gezeigt, dauert es einige Minuten, einen Build durchzuführen und die Client-Bibliothek mit einer lokalen Instanz von AEM zu synchronisieren. Dies ist für Endtests akzeptabel, aber nicht ideal für den Großteil der SPA-Entwicklung.
Ein webpack-Dev-Server kann zur schnellen Entwicklung der SPA verwendet werden. Der SPA liegt ein von AEM erstelltes JSON-Modell zugrunde. In dieser Übung wird der JSON-Inhalt einer laufenden AEM-Instanz durch einen Proxy-Vorgang an den vom Angular-Projekt konfigurierten Entwicklungs-Server übergeben.
Kehren Sie zur IDE zurück und öffnen Sie die Datei proxy.conf.json unter ui.frontend/proxy.conf.json
.
[
{
"context": [
"/content/**/*.(jpg|jpeg|png|model.json)",
"/etc.clientlibs/**/*"
],
"target": "http://localhost:4502",
"auth": "admin:admin",
"logLevel": "debug"
}
]
Die Angular-App bietet einen einfachen Mechanismus zum Durchführen von Proxy-Vorgängen für API-Anfragen. Die in context
spezifizierten Muster müssen durch einen Proxy-Vorgang über localhost:4502
, dem lokalen AEM-Schnellstart, übermittelt werden.
Öffnen Sie die Datei index.html unter ui.frontend/src/index.html
. Dies ist die HTML-Stammdatei, die vom Dev-Server verwendet wird.
Beachten Sie, dass ein Eintrag für base href="/"
vorhanden ist. Das Base-Tag ist wichtig, damit die App relative URLs auflösen kann.
<base href="/">
Öffnen Sie ein Terminal-Fenster und navigieren Sie zum Ordner ui.frontend
. Führen Sie den Befehl npm start
aus:
$ cd ui.frontend
$ npm start
> wknd-spa-angular@0.1.0 start /Users/dgordon/Documents/code/aem-guides-wknd-spa/ui.frontend
> ng serve --open --proxy-config ./proxy.conf.json
10% building 3/3 modules 0 active[HPM] Proxy created: [ '/content/**/*.(jpg|jpeg|png|model.json)', '/etc.clientlibs/**/*' ] -> http://localhost:4502
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
ℹ 「wds」: Project is running at http://localhost:4200/webpack-dev-server/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: 404s will fallback to //index.html
Öffnen Sie eine neue Browser-Registerkarte (falls noch nicht geöffnet) und navigieren Sie zu http://localhost:4200/content/wknd-spa-angular/us/en/home.html.
Sie sollten denselben Inhalt wie in AEM sehen, jedoch ohne dass eine der Authoring-Funktionen aktiviert ist.
Kehren Sie zur IDE zurück und erstellen Sie unter ui.frontend/src/assets
einen neuen Ordner namens img
.
Laden Sie das folgende WKND-Logo herunter und fügen Sie es dem Ordner img
hinzu:
Öffnen Sie header.component.html unter ui.frontend/src/app/components/header/header.component.html
und fügen Sie das Logo ein:
<header class="header">
<div class="header-container">
<div class="logo">
<img class="logo-img" src="assets/img/wknd-logo-dk.png" alt="WKND SPA" />
</div>
</div>
</header>
Speichern Sie die Änderungen in header.component.html.
Kehren Sie zum Browser zurück. Sie sollten die Änderungen an der App sofort sehen.
Sie können weitere Inhaltsaktualisierungen in AEM vornehmen. Diese werden auf dem webpack-Dev-Server wiedergegeben, da wir den Inhalt über einen Proxy-Vorgang spiegeln. Beachten Sie, dass die Inhaltsänderungen nur auf dem webpack-Dev-Server sichtbar sind.
Halten Sie den lokalen Webserver an, indem Sie am Terminal ctrl+c
verwenden.
Eine weitere Möglichkeit, die Entwicklung zu beschleunigen, besteht darin, eine statische JSON-Datei als JSON-Modell zu verwenden. Durch JSON-„Mocking“ entfernen wir die Abhängigkeit von einer lokalen AEM-Instanz. Außerdem können dadurch Frontend-Entwicklerinnen und -Entwickler das JSON-Modell aktualisieren, um die Funktionalität zu testen und Änderungen an der JSON-API vorzunehmen, die später von Backend-Entwicklerinnen und -Entwicklern implementiert werden.
Die Ersteinrichtung des JSON-Mockups erfordert eine lokale AEM-Instanz.
Navigieren Sie im Browser zu http://localhost:4502/content/wknd-spa-angular/us/en.model.json.
Hierbei handelt es sich um den von AEM exportierten JSON-Inhalt, von dem die Anwendung gesteuert wird. Kopieren Sie die JSON-Ausgabe.
Kehren Sie zur IDE zurück, navigieren Sie zu ui.frontend/src
und fügen Sie neue Ordner namens mocks und json entsprechend der folgenden Ordnerstruktur hinzu:
|-- ui.frontend
|-- src
|-- mocks
|-- json
Erstellen Sie unter ui.frontend/public/mocks/json
eine neue Datei mit dem Namen en.model.json. Fügen Sie die JSON-Ausgabe aus Schritt 1 hier ein.
Erstellen Sie unter ui.frontend
eine neue Datei mit dem Namen proxy.mock.conf.json. Füllen Sie die Datei mit folgendem Inhalt:
[
{
"context": [
"/content/**/*.model.json"
],
"pathRewrite": { "^/content/wknd-spa-angular/us" : "/mocks/json"} ,
"target": "http://localhost:4200",
"logLevel": "debug"
}
]
Diese Proxy-Konfiguration schreibt Anfragen, die mit /content/wknd-spa-angular/us
beginnen, zu /mocks/json
um und beliefert die entsprechende statische JSON-Datei, z. B.:
/content/wknd-spa-angular/us/en.model.json -> /mocks/json/en.model.json
Öffnen Sie die Datei angular.json. Fügen Sie eine neue dev-Konfiguration mit aktualisiertem Assets-Array hinzu, das auf den erstellten Ordner mocks verweist.
"dev": {
"assets": [
"src/mocks",
"src/assets",
"src/favicon.ico",
"src/logo192.png",
"src/logo512.png",
"src/manifest.json"
]
},
Durch Erstellung einer dedizierten dev-Konfiguration wird sichergestellt, dass der Ordner mocks nur während der Entwicklung verwendet und nie in einem Produktions-Build in AEM implementiert wird.
Aktualisieren Sie als Nächstes in der Datei angular.json die browserTarget-Konfiguration so, dass die neue dev-Konfiguration verwendet wird:
...
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
+ "browserTarget": "angular-app:build:dev"
- "browserTarget": "angular-app:build"
},
...
Öffnen Sie die Datei ui.frontend/package.json
und fügen Sie einen neuen Befehl start:mock zum Verweisen auf die Datei proxy.mock.conf.json hinzu.
"scripts": {
"start": "ng serve --open --proxy-config ./proxy.conf.json",
+ "start:mock": "ng serve --open --proxy-config ./proxy.mock.conf.json",
"build": "ng lint && ng build && clientlib",
"build:production": "ng lint && ng build --prod && clientlib",
"test": "ng test",
"sync": "aemsync -d -w ../ui.apps/src/main/content"
}
Durch Hinzufügen eines neuen Befehls ist es einfach, zwischen den Proxy-Konfigurationen umzuschalten.
Halten Sie den webpack-Dev-Server an, falls er aktuell ausgeführt wird. Starten Sie den webpack-Dev-Server mit dem Skript start:mock:
$ npm run start:mock
> wknd-spa-angular@0.1.0 start:mock /Users/dgordon/Documents/code/aem-guides-wknd-spa/ui.frontend
> ng serve --open --proxy-config ./proxy.mock.conf.json
Navigieren Sie zu http://localhost:4200/content/wknd-spa-angular/us/en/home.html. Sie sollten daraufhin dieselbe SPA sehen, wobei der Inhalt nun aber aus der JSON-Pseudodatei bezogen wird.
Nehmen Sie eine kleine Änderung an der zuvor erstellten Datei en.model.json vor. Der aktualisierte Inhalt sollte sofort auf dem webpack-Dev-Server widergespiegelt werden.
Die Fähigkeit, das JSON-Modell zu bearbeiten und die Auswirkungen auf eine Live-SPA zu sehen, kann Entwicklerinnen und Entwicklern dabei helfen, die JSON-Modell-API zu verstehen. Außerdem können Frontend- und Backend-Entwicklung parallel erfolgen.
Als Nächstes fügen Sie dem Projekt einige aktualisierte Stile hinzu. Durch dieses Projekt wird Sass-Unterstützung für einige nützliche Funktionen wie Variablen hinzugefügt.
Öffnen Sie ein Terminal-Fenster und halten Sie den webpack-Dev-Server an, sofern gestartet. Geben Sie innerhalb des Ordners ui.frontend
den folgenden Befehl ein, um die Angular-App so zu aktualisieren, dass scss-Dateien verarbeitet werden.
$ cd ui.frontend
$ ng config schematics.@schematics/angular:component.styleext scss
Dadurch wird die Datei angular.json
mit einem neuen Eintrag am Ende der Datei aktualisiert:
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
Installieren Sie normalize-scss
, um die Stile Browser-übergreifend zu normalisieren:
$ npm install normalize-scss --save
Kehren Sie zur IDE zurück und erstellen Sie unter ui.frontend/src
einen neuen Ordner mit dem Namen styles
.
Erstellen Sie unter ui.frontend/src/styles
eine neue Datei mit dem Namen _variables.scss
und füllen Sie sie mit den folgenden Variablen auf:
//_variables.scss
//== Colors
//
//## Gray and brand colors for use across theme.
$black: #202020;
$gray: #696969;
$gray-light: #EBEBEB;
$gray-lighter: #F7F7F7;
$white: #FFFFFF;
$yellow: #FFEA00;
$blue: #0045FF;
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-base: $font-family-sans-serif;
$font-size-base: 18px;
$line-height-base: 1.5;
$line-height-computed: floor(($font-size-base * $line-height-base));
// Functional Colors
$brand-primary: $yellow;
$body-bg: $white;
$text-color: $black;
$text-color-inverse: $gray-light;
$link-color: $blue;
//Layout
$max-width: 1024px;
$header-height: 75px;
// Spacing
$gutter-padding: 12px;
Ändern Sie die Erweiterung der Datei styles.css unter ui.frontend/src/styles.css
zu styles.scss. Ersetzen Sie den Inhalt durch Folgendes:
/* styles.scss * /
/* Normalize */
@import '~normalize-scss/sass/normalize';
@import './styles/variables';
body {
background-color: $body-bg;
font-family: $font-family-base;
margin: 0;
padding: 0;
font-size: $font-size-base;
text-align: left;
color: $text-color;
line-height: $line-height-base;
}
body.page {
max-width: $max-width;
margin: 0 auto;
padding: $gutter-padding;
padding-top: $header-height;
}
Aktualisieren Sie angular.json und ändern Sie den Namen style.css in allen Verweisen zu styles.scss. Es sollte 3 Verweise geben.
"styles": [
- "src/styles.css"
+ "src/styles.scss"
],
Als Nächstes fügen Sie mit Sass einige markenspezifische Stile zur Header-Komponente hinzu.
Starten Sie den webpack-Dev-Server, um zu sehen, wie die Stile in Echtzeit aktualisiert werden:
$ npm run start:mock
Benennen Sie unter ui.frontend/src/app/components/header
die Datei header.component.css in header.component.scss um. Befüllen Sie die Datei mit folgendem Inhalt:
@import "~src/styles/variables";
.header {
width: 100%;
position: fixed;
top: 0;
left:0;
z-index: 99;
background-color: $brand-primary;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24);
}
.header-container {
display: flex;
max-width: $max-width;
margin: 0 auto;
padding-left: $gutter-padding;
padding-right: $gutter-padding;
}
.logo {
z-index: 100;
display: flex;
padding-top: $gutter-padding;
padding-bottom: $gutter-padding;
}
.logo-img {
width: 100px;
}
Aktualisieren Sie header.component.ts so, dass auf header.component.scss verwiesen wird:
...
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
- styleUrls: ['./header.component.css']
+ styleUrls: ['./header.component.scss']
})
...
Kehren Sie zum Browser und webpack-Dev-Server zurück:
Sie sollten nun die aktualisierten Stile sehen, die zur Header-Komponente hinzugefügt wurden.
Die Header-Änderungen sind aktuell nur über den webpack-Dev-Server sichtbar. Stellen Sie die aktualisierte SPA für AEM bereit, um die Änderungen anzuzeigen.
Halten Sie den webpack-Dev-Server an.
Navigieren Sie zum Stammverzeichnis des Projekts /aem-guides-wknd-spa
und stellen Sie das Projekt mithilfe von Maven für AEM bereit:
$ cd ..
$ mvn clean install -PautoInstallSinglePackage
Navigieren Sie zu http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Sie sollten den aktualisierten Header mit angewendetem Logo und angewendeten Stilen sehen:
Nachdem sich jetzt die aktualisierte SPA in AEM befindet, kann die Bearbeitung fortgesetzt werden.
Herzlichen Glückwunsch, Sie haben die SPA aktualisiert und die Integration mit AEM untersucht! Sie kennen jetzt zwei verschiedene Ansätze, um die SPA für die AEM-JSON-Modell-API mit einem webpack-Dev-Server zu entwickeln.
Sie können den fertigen Code jederzeit auf GitHub ansehen oder den Code lokal auschecken, indem Sie zur Verzweigung Angular/integrate-spa-solution
wechseln.
Zuordnen von SPA-Komponenten zu AEM-Komponenten: Erfahren Sie, wie Sie Angular-Komponenten Adobe Experience Manager (AEM)-Komponenten mit dem AEM SPA Editor JS SDK zuordnen. Die Komponentenzuordnung ermöglicht es Autorinnen und Autoren, im AEM-SPA-Editor dynamische Aktualisierungen an SPA-Komponenten vorzunehmen, ähnlich wie beim herkömmlichen AEM-Authoring.