Show Menu
TOPICS×

Build front-end per SPA angolari

In questo documento vengono illustrati i dettagli del progetto creato utilizzando archetype per creare un'applicazione SPA (Single Page Application) basata sul framework Angular. Ad esempio, quando si imposta l’
frontendModule
opzione su
angular
.

Panoramica

Questo progetto è stato avviato con l'interfaccia angolare CLI .
Questa applicazione è progettata per utilizzare il modello AEM di un sito. Viene generato automaticamente il layout utilizzando i componenti helper del pacchetto @adobe/cq-angular-editable-components .

Script

Nella directory del progetto potete eseguire i seguenti comandi.

npm start

npm start
Questo comando esegue l’app in modalità di sviluppo eseguendo il proxy del modello JSON da un’istanza AEM locale in esecuzione su http://localhost:4502. Ciò presuppone che l’intero progetto sia stato distribuito in AEM almeno una volta (
mvn clean install -PautoInstallPackage
nella directory principale del progetto).
Dopo l'avvio npm nella directory ui.frontend, l'app verrà automaticamente aperta nel browser (nel percorso http://localhost:4200/content/$/$/$/home.html). Se apportate delle modifiche, la pagina verrà ricaricata.
Se si verificano errori relativi a CORS, è possibile configurare AEM come segue:
  1. Passare a Gestione configurazione (http://localhost:4502/system/console/configMgr)
  2. Aprite la configurazione per "Criteri di condivisione risorse tra le origini di Adobe Granite"
  3. Create una nuova configurazione con i seguenti valori aggiuntivi:
    • Origini consentite: http://localhost:4200
    • Intestazioni supportate:Autorizzazione
    • Metodi Consentiti: OPZIONI

test NPM

npm test
Questo comando avvia il runtime di test Karma. Per ulteriori informazioni, consulta la documentazione Angular sull’esecuzione di test .

test di esecuzione npm:debug

npm run test:debug
Questo comando avvia il corridore di prova Karma in modalità orologio interattiva.

build di esecuzione npm

npm run build
Questo comando crea l'app per la produzione nella cartella build. Offre il bundle Angular in modalità di produzione e ottimizza la build per ottenere le migliori prestazioni. Per ulteriori informazioni, consulta la documentazione angolare sulla distribuzione .
Inoltre, AEM ClientLib viene generato dall'app utilizzando il pacchetto aem-clientlib-generator .
Per ulteriori informazioni sull’utilizzo di AEM ClientLibs da parte dell’archetipo del progetto, consulta la documentazione generale del modulo ui.frontend.

Supporto browser

Per impostazione predefinita, questo progetto utilizza l'opzione predefinita Browser per identificare i browser di destinazione. Inoltre, include i riempimenti per le funzioni in lingue moderne per supportare i browser meno recenti (ad esempio Internet Explorer 11). Se il supporto di tali browser non è un requisito, le dipendenze di polifugo e le importazioni possono essere rimosse.