Compilación front-end para SPA angulares

Este documento explica los detalles del proyecto creado al utilizar el arquetipo para crear una aplicación de una sola página (SPA) basada en el marco Angular. Es decir, cuando establece la opción frontendModule en angular.

Información general

Este proyecto se inició con la CLI angular.

Esta aplicación está diseñada para consumir el modelo AEM de un sitio. Generará automáticamente el diseño utilizando los componentes auxiliares del paquete @adobe/cq-angular-editable-components.

Secuencias de comandos

En el directorio del proyecto, puede ejecutar los siguientes comandos.

inicio npm

npm start

Este comando ejecuta la aplicación en modo de desarrollo mediante el proxy del modelo JSON desde una instancia de AEM local que se ejecuta en http://localhost:4502. Esto supone que todo el proyecto se ha implementado para AEM al menos una vez (mvn clean install -PautoInstallPackage en la raíz del proyecto).

Después de ejecutar el inicio npm en el directorio ui.front, la aplicación se abrirá automáticamente en el explorador (en la ruta http://localhost:4200/content/${appId}/${country}/${language}/home.html). Si realiza modificaciones, la página se volverá a cargar.

Si está obteniendo errores relacionados con CORS, puede que desee configurar AEM de la siguiente manera:

  1. Vaya a Configuration Manager (http://localhost:4502/system/console/configMgr)
  2. Abra la configuración de la "Política de uso compartido de recursos entre Orígenes de Adobe Granite"
  3. Cree una nueva configuración con los siguientes valores adicionales:
    • Orígenes permitidos: http://localhost:4200
    • Encabezados admitidos: Autorización
    • Métodos permitidos: OPTIONS

prueba npm

npm test

Este comando inicia el ejecutor de pruebas Karma. Consulte la documentación angular sobre la ejecución de pruebas para obtener más información.

prueba de ejecución npm:debug

npm run test:debug

Este comando inicia el ejecutor de pruebas Karma en modo de reloj interactivo.

npm run build

npm run build

Este comando crea la aplicación para producción en la carpeta de compilación. Agrupa Angular en modo de producción y optimiza la compilación para obtener el mejor rendimiento. Consulte la documentación angular sobre la implementación para obtener más información.

Además, se genera un AEM ClientLib desde la aplicación mediante el paquete aem-clientlib-generator.

Consulte la documentación general del módulo ui.frontender para obtener más información sobre cómo AEM ClientLibs se utilizan en el arquetipo del proyecto.

Compatibilidad con exploradores

De forma predeterminada, este proyecto utiliza la opción predeterminada de Browserslist para identificar los exploradores de destinatario. Además, incluye polirellenos para las características de idioma moderno que admiten exploradores más antiguos (por ejemplo, Internet Explorer 11). Si la compatibilidad con estos exploradores no es un requisito, se pueden eliminar las importaciones y dependencias de relleno múltiple.

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free