Puede crear flujos de acuerdo con sus requisitos empresariales. Cada flujo es una aplicación angular habilitada para un solo spa con su propio package.json para gestionar sus dependencias y un grupo de pantallas o componentes de página modelados como ruta angular. Un componente de página es un componente angular de nivel de ruta que se utiliza para definir una ruta en el módulo de direccionamiento.
Procedimiento
Para crear una nueva aplicación angular con un único spa habilitado, realice los pasos siguientes:
- Vaya al directorio
<store-temp> y ejecute el mandato siguiente:
yarn new-extension-feature --module-name=<module-name> --port=<port>
Este mandato da soporte a las opciones siguientes:
--module-name -El nombre del módulo.
Nota: Asegúrese de que cada palabra del valor de atributo < module-name> esté separada por un guión (-). Por ejemplo, si el nombre de módulo es custom move inventory
, especifique el valor como custom-move-inventory
.
--port -El número de puerto donde se ejecuta la nueva aplicación.
El mandato completa las tareas siguientes:
- Crea una nueva aplicación angular con el prefijo
isf en la carpeta <store-temp>/extensions/features . Todo el código fuente residirá en la carpeta <store-temp>/extensions/features/<module-name> .
- Instala single-spa-angular.
- Genera un
main.single-spa.ts en la carpeta de proyecto de src .
- Genera un módulo cargado perezoso con
<module-name> en la carpeta de proyecto src/app .
- Actualiza el archivo
src/app-routing.module.ts del módulo de direccionamiento con las siguientes definiciones de ruta:
- Módulo cargado con retardo con la definición de vía de acceso de ruta adecuada.
EmptyRouteComponent para rutas no coincidentes.
- Actualiza la raíz de proyectos
package.json con los scripts de inicio y compilación de la aplicación. Estos scripts se utilizan para iniciar y crear la aplicación.
- Registra la nueva aplicación en
<store-temp>/extensions/override-static-assets/root-config/custom/import-map.json. El archivo import-map.json registra el módulo JavaScript para cargar una aplicación específica.
- Para dar soporte a la localización y la internacionalización, las carpetas
i18n se generan dentro de la carpeta de proyecto src/assets para mantener los paquetes específicos del idioma. Se genera un archivo JSON de paquete de en.json vacío dentro de la carpeta de proyecto src/assets/<module-name>/i18n . El código también se actualiza para configurar el TranslateModule para cargar los archivos JSON de paquete de traducción adecuados.
- Cree nuevas vistas o pantallas para el flujo en
<store-temp>/extensions/features/<module-name>/src/app/features/<module-name>.
Cada pantalla es un componente de página con una ruta correspondiente definida en el archivo <store-temp>/extensions/features/<module-name>/src/app/features<module-name>/<module-name>.routing.module.ts .
- Actualice las nuevas rutas que se añaden como parte del nuevo flujo en
routes.json. Las nuevas rutas están presentes en <store-temp>/extensions/override-static-assets/root-config/custom/routes.json.
La ruta proporcionada en la aplicación se configura como parte de feature-routes.json que está presente en store-single-spa/extensions/override-static-assets/root-config/custom/routes.json. Para obtener más información sobre la actualización de las nuevas rutas, consulte Actualización de mapas de importación y routes.json.
Qué hacer a continuación
Lleve a cabo las tareas siguientes:
