Show Menu
TOPICS×

Front-End-Build für Angular-SPAs

In diesem Dokument werden die Details des Projekts erläutert, das erstellt wird, wenn mithilfe des Archetyps eine Single Page Application (SPA) basierend auf dem Angular Framework erstellt wird, das heißt, wenn Sie die Option
frontendModule
auf
angular
festlegen.

Überblick

Dieses Projekt nutzt die Angular-CLI per Bootstrapping.
Diese Anwendung verarbeitet das AEM-Modell einer Site und generiert automatisch das Layout mit den Hilfekomponenten des Pakets @adobe/cq-angular-editable-components .

Skripte

Im Projektverzeichnis können Sie die folgenden Befehle ausführen.

npm start

npm start
Mit diesem Befehl wird die App im Entwicklungsmodus ausgeführt, indem eine lokale AEM-Instanz, die unter http://localhost:4502 ausgeführt wird, als Proxy des JSON-Modells fungiert. Dabei wird davon ausgegangen, dass das gesamte Projekt mindestens einmal in AEM bereitgestellt wurde (
mvn clean install -PautoInstallPackage
im Projektstamm).
Nachdem Sie „npm start“ im ui.frontend-Verzeichnis ausgeführt haben, wird Ihre App automatisch im Browser geöffnet (unter dem Pfad http://localhost:4200/content/$/$/$/home.html). Wenn Sie Änderungen vornehmen, wird die Seite neu geladen.
Falls Fehler im Zusammenhang mit CORS auftreten, sollten Sie AEM wie folgt konfigurieren:
  1. Navigieren Sie zum Konfigurations-Manager (http://localhost:4502/system/console/configMgr).
  2. Öffnen Sie die Konfiguration für „Adobe Granite Cross-Origin Resource Sharing Policy“.
  3. Erstellen Sie eine neue Konfiguration mit den folgenden zusätzlichen Werten:
    • Zulässiger Ursprung: http://localhost:4200
    • Unterstützte Header: Authorization
    • Zulässige Methoden: OPTIONS

npm test

npm test
Mit diesem Befehl wird der Karma-Test-Runner gestartet. Weitere Informationen finden Sie in der Angular-Dokumentation zum Ausführen von Tests .

npm run test:debug

npm run test:debug
Mit diesem Befehl wird der Karma-Test-Runner im interaktiven Überwachungsmodus gestartet.

npm run build

npm run build
Mit diesem Befehl wird die App für die Produktion im Build-Ordner erstellt. Er integriert Angular im Produktionsmodus und optimiert den Build für die beste Leistung. Weitere Informationen finden Sie in der Angular-Dokumentation zur Bereitstellung .
Darüber hinaus wird eine AEM ClientLib aus der App mithilfe des Pakets aem-clientlib-generator generiert.
Weitere Informationen zur Verwendung von AEM ClientLibs durch den Projektarchetyp finden Sie in der allgemeinen Dokumentation zum ui.frontend-Modul .

Browserunterstützung

Standardmäßig verwendet dieses Projekt die Standardoption von Browserslist , um Zielbrowser zu identifizieren. Zusätzlich enthält es Polyfills für moderne Sprachfunktionen, um ältere Browser (z. B. Internet Explorer 11) zu unterstützen. Wenn die Unterstützung solcher Browser nicht erforderlich ist, können die Polyfill-Abhängigkeiten und Importe entfernt werden.