Modificación de pantallas proporcionadas por la aplicación

Todas las URL de Sterling Store Engagement tienen en común /isf/store-frontend/shell seguido de la ruta específica de la pantalla. Si la pantalla Resumen de envíos, la ruta específica de la pantalla es /shipment/summary/<ShipmentKey>. Considere el primer fragmento de la vía de acceso de ruta, que es shipment. Sin embargo, en la mayoría de los casos, el primer fragmento es el nombre de la aplicación, con pocas excepciones. La tabla siguiente describe los fragmentos excepcionales:

Tabla 1. Fragmentos excepcionales

Primer fragmento	Nombre de aplicación
order	orders
ship-package	ship-packages
return	returns
shipment	shipment-list-summary
customer	customer-profile

Si la pantalla Resumen de envíos, la ruta de acceso coincide dentro de <store-temp>/packages/features/shipment-list-summary/src/app/features/shipment-list-summary/shipment-list-summary-routing.module.ts para la que la ruta es la siguiente:

{
    path: 'summary/:shipmentKey',
    component: ShipmentSummaryPageComponent
  }

En la configuración de ruta, puede identificar el componente de página como ShipmentSummaryPageComponent. El archivo de módulo de direccionamiento también contiene la sentencia de importación para el componente de página ShipmentSummaryPageComponent , que describe dónde está presente el componente en el código fuente.

import { ShipmentSummaryPageComponent } from './shipment-summary-page/shipment-summary-page.component';

yarn override-route --module-name=<module-name> --override-module-name=<override-module-name> --override-component-folder-name=<component-name> --port=<port>

Por ejemplo:

yarn override-route --override-module-name=shipment-list-summary --module-name=custom-shipment-list-summary  --override-component-folder-name=shipment-summary-page --port=6785

En este mandato:

• --override-module-name hace referencia al nombre de la aplicación que contiene la pantalla proporcionada por la aplicación. El nombre de aplicación para la pantalla Resumen de envío es shipment-list-summary.
• --module-name hace referencia al nombre de la aplicación de extensión que se debe crear y puede ser cualquier nombre válido. Como práctica recomendada, anteponga el nombre personalizado al nombre de la aplicación y utilícelo como nombre del módulo. Por ejemplo, custom-shipment-list-summary.
• --override-component-folder-name hace referencia al nombre de carpeta del componente de página proporcionado por la aplicación que desea alterar temporalmente.

  En el paso 2, para el componente de página, ha identificado el nombre de carpeta como shipment-summary-page.

• --port hace referencia al número de puerto donde se ejecuta la nueva aplicación.

El mandato de CLI de override-route realiza las tareas siguientes:

• Crea una aplicación angular con isf como prefijo en la carpeta <store-temp>/extensions/features . El código fuente está presente en la carpeta <store-temp>/extensions/features/<module-name> .
• Instala el módulo de nodo single-spa-angular en la aplicación angular que se crea.
• Genera el archivo main.single-spa.ts en la carpeta de proyecto src .
• Genera un módulo cargado perezoso con <module-name> en la carpeta de proyecto <store-temp>/extensions/features/<module-name>/src/app .
• Actualiza el archivo de módulo de direccionamiento <store-temp>/extensions/features/<module-name>/src/app-routing.module.ts 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 las rutas no coincidentes.
• Actualiza el archivo package.json con los scripts de inicio y compilación de la aplicación.
• Registra la nueva aplicación en el archivo <store-temp>/extensions/override-static-assets/root-config/custom/import-map.json . El archivo import-map.json registra el módulo JavaScript™ para cargar la aplicación específica.
• Para dar soporte a la localización y la internacionalización, el mandato genera las carpetas i18n en la carpeta de proyecto <store-temp>/extensions/features/<module-name>/src/assets y mantiene los archivos JSON de paquete específicos del idioma. Se genera un archivo JSON de paquete en.json vacío en la carpeta de proyecto <store-temp>/extensions/features/<module-name>/src/assets/<module-name>/i18n . El código también se actualiza para configurar TranslateModule para cargar los archivos JSON de paquete de conversión adecuados.
• Copia la carpeta component especificada en el parámetro --override-component-folder-name en la carpeta <store-temp>/extensions/features/<module-name>/src/app/features/<module-name> . Los archivos presentes en la carpeta component se utilizan para alterar temporalmente la pantalla proporcionada por la aplicación.
• Importa automáticamente los servicios y componentes angulares dependientes en el archivo ts del módulo de aplicación de extensión, store-temp>/extensions/features/<module-name>/src/app/features/<module-name>.module.ts. Sin embargo, si la matriz de proveedores está definida en el archivo <module-name>.module.ts del código fuente, el mandato de CLI no copia la matriz de proveedores. Copie manualmente la matriz de proveedores en /extensions/features/src/app/features/<module-name>.module.ts e importe las dependencias que se copian como parte de la matriz de proveedores.
  Por ejemplo, si está ampliando PickOrderPageComponent desde shipment-backroom-pick, el archivo shipment-backroom-pick.module.ts contiene la matriz de proveedores definidos.

  providers: [
      AlertModalService,
      PickOrderDataService,
      ValidatePickOrderGuard,
      PickOrderRTConfig
    ]

  En el archivo shipment-backroom-pick.module.ts , copie la matriz de proveedores en el archivo module.ts correspondiente en extensiones. Añada sentencias de importación para cada una de las entradas de los proveedores tal como se ilustra.

  import { AlertModalService } from '@store/core';
  import { PickOrderDataService } from './pick-order-page/pick-order-data.service';
  import { ValidatePickOrderGuard } from './pick-order-page/validate-pick-order.guard';
  import { PickOrderRTConfig } from './pick-order-page/pick-order-rt-config';

  Nota: El mandato de CLI sólo copia los archivos que están presentes en la carpeta component . Si el componente ampliado importa archivos que están fuera de la carpeta component , asegúrese de copiar manualmente dichos archivos en la ubicación adecuada dentro de la nueva aplicación de extensión. A continuación, importe y declare dichas dependencias en el archivo de módulo de extensión <store-temp>/extensions/features/<module-name>/src/app/features/<module-name>/<module-name>.module.ts .
• Actualiza la entrada siguiente para el archivo import-map.json personalizado que está presente en la carpeta <store-temp>/extensions/override-static-assets/root-config/custom/ .

  {
    "imports": {
      "<module-name>": "/<module-name>/main.js"
    }
  }

El siguiente código de ejemplo ilustra el comportamiento antes y después de una actualización:

• Antes de actualizar

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  const routes: Routes = [
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class CustomShipmentListSummaryRoutingModule { }

• Después de actualizar

  import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { ShipmentSummaryPageComponent } from './shipment-summary-page/shipment-summary-page.component';
  
  const routes: Routes = [
    {
      path: 'summary/:shipmentKey',
      component: ShipmentSummaryPageComponent
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class CustomShipmentListSummaryRoutingModule { }

{
"type": "route",
"path": "shell/shipment",
"routes": [
{
"type": "application",
"name": "shipment-list-summary"
}
]
},
{
"type": "route",
"path": "shell/shipment/list",
"routes": [
{
"type": "application",
"name": "shipment-list-summary"
}
]
},
{
"type": "route",
"path": "shell/shipment/summary/:shipmentKey",
"routes": [
{
"type": "application",
"name": "shipment-list-summary"
}
]
}

El siguiente fragmento de código ilustra la entrada coincidente en el archivo feature-routes.json .

{
"type": "route",
"path": "shell/shipment/summary/:shipmentKey",
"routes": [
{
"type": "application",
"name": "shipment-list-summary"
}
]
}