Sviluppo front-end per SPA Angular

In questo documento vengono illustrati i dettagli del progetto creato quando si utilizza l’archetipo per creare un’applicazione a pagina singola (SPA) basata sul framework Angular. Ad esempio, quando imposti l’opzione frontendModule su angular.

Panoramica

Questo progetto è stato avviato con l’interfaccia della riga di comando Angular.

Questa applicazione è stata sviluppata per avvalersi del modello AEM di un sito. Genera automaticamente il layout utilizzando i componenti helper del pacchetto @adobe/cq-angular-editable-components.

Script

Nella directory del progetto, è possibile eseguire i comandi sotto riportati.

npm start

npm start

Questo comando esegue l’app in modalità di sviluppo tramite il proxy del modello JSON da un’istanza di AEM locale in esecuzione su http://localhost:4502. Ciò presuppone che l’intero progetto sia stato distribuito ad AEM almeno una volta (mvn clean install -PautoInstallPackage nella directory principale del progetto).

Dopo aver eseguito il comando npm start nella directory ui.frontend, l’app viene automaticamente aperta nel browser (nel percorso http://localhost:4200/content/${appId}/${paese}/${lingua}/home.html). Se apporti modifiche, la pagina viene ricaricata.

Se ricevi errori relativi a CORS, configura AEM come segue:

  1. Vai a Gestione configurazione (http://localhost:4502/system/console/configMgr)
  2. Apri la configurazione per "Adobe Granite Cross-Origin Resource Sharing Policy"
  3. Crea una nuova configurazione con i seguenti valori aggiuntivi:
    • Origini consentite: http://localhost:4200
    • Intestazioni supportate: autorizzazione
    • Metodi consentiti: OPZIONI

npm test

npm test

Questo comando avvia l’esecuzione del test Karma. Per ulteriori informazioni, vedi la documentazione di Angular sull’esecuzione dei test.

npm run test:debug

npm run test:debug

Questo comando avvia l’esecuzione dei test Karma in modalità espressione di controllo interattivo.

npm run build

npm run build

Questo comando esegue lo sviluppo dell’app per la produzione nella cartella di sviluppo. Crea il bundle Angular in modalità di produzione e ottimizza lo sviluppo per ottenere le migliori prestazioni. Per ulteriori informazioni, vedi la documentazione di Angular sulla distribuzione.

Inoltre, dall’app viene generata un’AEM ClientLib utilizzando il pacchetto aem-clientlib-generator.

Per ulteriori informazioni sull’utilizzo delle AEM ClientLib da parte dell’Archetipo di progetto, vedi la documentazione generale del modulo ui.frontend.

Supporto del browser

Per impostazione predefinita, questo progetto utilizza l’opzione predefinita Browserslist per identificare i browser di destinazione. Inoltre, include i polyfill per permettere alle moderne funzioni di lingua di supportare i browser precedenti (ad esempio, Internet Explorer 11). Se il supporto di questi browser non è un requisito, le dipendenze e importazioni di polyfill possono essere rimosse.

In questa pagina