Show Menu
TOPICS×

Génération front-end pour les applications monopage Angular

Ce document explique les détails du projet créé lors de l’utilisation de l’archétype pour créer une application monopage (SPA) basée sur l’infrastructure Angular, c’est-à-dire, lorsque vous définissez l’option
frontendModule
sur
angular
.

Présentation

Ce projet a été démarré avec l’ interface de ligne de commande Angular .
Cette application est créée pour consommer le modèle AEM d’un site. Elle génère automatiquement la mise en page à l’aide des composants de l’application d’assistance à partir du package @adobe/cq-angular-editable-components .

Scripts

Dans le répertoire du projet, vous pouvez exécuter les commandes ci-après.

npm start

npm start
Cette commande exécute l’application en mode de développement en transmettant un proxy au modèle JSON à partir d’une instance AEM locale s’exécutant sur http://localhost:4502. Cela suppose que le projet entier a été déployé sur AEM au moins une fois (
mvn clean install -PautoInstallPackage
à la racine du projet).
Une fois que vous avez exécuté npm start dans le répertoire ui.frontend, votre application s’ouvre automatiquement dans votre navigateur (à l’adresse http://localhost:4200/content/$/$/$/home.html). Si vous effectuez des modifications, la page se recharge.
Si des erreurs liées à CORS s’affiche, vous souhaiterez peut-être configurer AEM comme suit :
  1. Accédez au gestionnaire de configuration (http://localhost:4502/system/console/configMgr).
  2. Ouvrez la configuration pour « Adobe Granite Cross-Origin Resource Sharing Policy ».
  3. Créez une configuration avec les valeurs supplémentaires suivantes :
    • Origines autorisées : http://localhost:4200
    • En-têtes pris en charge : Autorisation
    • Méthodes autorisées : OPTIONS

test npm

npm test
Cette commande lance l’exécuteur de test Karma. Pour plus d’informations, consultez la documentation Angular sur l’exécution des tests .

npm run test:debug

npm run test:debug
Cette commande lance l’exécuteur de test Karma en mode espion interactif.

npm run build

npm run build
Cette commande crée l’application pour production dans le dossier de génération. Elle place Angular en mode de production et optimise la génération pour des performances optimales. Pour plus d’informations, consultez la documentation Angular sur le déploiement .
De plus, une bibliothèque cliente AEM est générée à partir de l’application à l’aide du package aem-clientlib-generator .
Pour plus d’informations sur l’utilisation des bibliothèques clientes AEM par l’archétype du projet, consultez la documentation générale du module ui.frontend .

Prise en charge des navigateurs

Par défaut, ce projet utilise l’option par défaut Browserslist pour identifier les navigateurs cible. De plus, il inclut des polyfills pour les fonctionnalités de langage moderne afin de prendre en charge les navigateurs plus anciens (par exemple, Internet Explorer 11). Si la prise en charge de ces navigateurs n’est pas obligatoire, les dépendances de polyfills et les importations peuvent être supprimées.