Creando Centro de pedidos de próxima generación aplicaciones usando un monorepo

El uso de una estrategia Angular monorepo utiliza Lerna para alojar varias aplicaciones en un único repositorio. Esta configuración le proporciona los medios para reutilizar el código, compartirlo entre aplicaciones sin tener que duplicar el código o crear repositorios de bibliotecas y compilaciones más pequeñas por ruta, lo que le ahorra tiempo. La estrategia monorepo es utilizada por todos IBM® proporcionó Centro de pedidos repositorios. Esta estrategia le proporciona un enfoque de personalización limpio donde puede personalizar rutas en un existente IBM repositorio sin hacerse cargo de todas las rutas sin cambios.

1. Extrae el Centro de pedidos de próxima generación código. Para más información, ver Comenzando con la personalización Centro de pedidos de próxima generación.
   Nota: El parámetro de versión para elom-compose.sh extract-orderhub-code el comando debe seroms para extraer el Centro de pedidos de próxima generación código. El parámetro de versiónomoc no es aplicable a Centro de pedidos de próxima generación.
2. Abra una consola y vaya a Centro de pedidos de próxima generación directorio de códigos. La ubicación predeterminada esdevtoolkit_docker/orderhub-code .
3. Para omitir la verificación SSL para las interacciones con los registros, establezca strict-ssl en falso ejecutando el siguiente comando.

   npm config set "strict-ssl" false

4. Ejecute uno de los siguientes comandos para reinstalar la última versión de @buc/schematics y acceder a los esquemas proporcionados por IBM. Para Angular v18, ejecute el siguiente comando.

npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v4latest.tgz

npm uninstall -g @buc/schematics
npm install -g ./lib/buc/schematics/schematics-v5latest.tgz

5. Cree una carpeta para su nueva aplicación. El nombre de la carpeta es el nombre del módulo. En la carpeta, cree unapp-config.json Archivo que describe las rutas en el módulo. El valor para nombre debe ser el nombre del módulo. Consulte el ejemplo siguiente.

{
  "name": "custom-monorepo",
  "devServerConfig": {
      "port": 9300,
      "contextRoot": "/custom-monorepo"
  },
  "prodServerConfig": {
      "hostName": "static.omsbusinessusercontrols.ibm.com"
  },
  "routes": {
      "custom-page1": {
          "devServerConfig": {
              "port": 9301,
              "contextRoot": "/custom-page1"
          }
      },
      "custom-page2": {
          "devServerConfig": {
              "port": 9302,
              "contextRoot": "/custom-page2"
          }
      }
  }
}

6. En la consola, vaya a la carpeta que creó.
7. Cree un espacio de trabajo e inicialice una nueva aplicación Angular ejecutando el siguiente comando.

ng new --collection=@buc/schematics \
--app-config-json=<app-config.json-file-name> \
--module-short-name=<short-name-for-the-module> \
--prefix=<selector-prefix> \
--mode=on-prem

--skip-git

Esta opción no inicializa un GitHub repositorio. El valor predeterminado es false.

--commit

Esta opción incluye la inicial GitHub información de confirmación del repositorio. El valor predeterminado es true.

--app-config-json

Esta opción es obligatoria. Utilizar elapp-config.json archivo que creó en el paso 5.

--module-short-name

El nombre corto del módulo. Si el nombre del módulo tiene guiones, entonces el nombre corto debe ser el texto después del último guión. Por ejemplo, si el nombre del módulo es configuración-de-la-aplicación-buc, el nombre corto del módulo debe ser ajustes.

Nota: El paquete root-config se genera a partir del paquete module-short-name. No cambies el nombre ni añadas un prefijo al module-short-name o no podrás desplegar las personalizaciones.

--prefix

El selector de HTML que se utilizará para los componentes generados. El valor predeterminado es buco.

--shared-library-name

El nombre de la biblioteca compartida. El nombre predeterminado es<module-short-name>-shared . El nombre del paquete es @<prefijo>/<nombre-corto-módulo>-compartido.

--generate-root-config

Indica si se debe generar un proyecto de enrutador de configuración raíz. El valor predeterminado es true.

--skip-install

Indica si se deben instalar paquetes. El valor predeterminado es false.

--mode

Establezca esta opción en en las instalaciones para generar código que sea aplicable para Centro de pedidos de próxima generación.

Consulte el ejemplo siguiente.

ng new --collection=@buc/schematics  --app-config-json=app-config.json
      --module-short-name=monorepo  --prefix=monorepo --mode=on-prem

Error: no se pudo compilar el punto de entrada @carbon/icons-angular/

8. Si Centro de pedidos de próxima generación Los contenedores no están funcionando actualmente, vaya a la páginadevtoolkit_docker/compose directorio y ejecute el siguiente comando.

./om-compose.sh start orderhub

9. Crear la versión de desarrollo local delfeatures.json archivo. Para más información, consulte Creación de los archivos features.json.
10. Para probar su nueva aplicación localmente, copie elfeatures.json archivo en elom-orderhub-base contenedor ejecutando los siguientes comandos.

docker exec om-orderhub-base bash -c 'mkdir -p /opt/app-root/src/shell-ui/assets/custom'

docker cp <orderhub-code>/shell-ui/assets/dev/. om-orderhub-base:/opt/app-root/src/shell-ui/assets/custom/

11. Inicie el servidor ingresando el siguiente comando.

yarn start-app

"** Angular Live Development Server está escuchando en localhost:<puerto>, 
abre tu navegador en https://localhost:<puerto>/<módulo>/<ruta> **"

El comando de error falló con el código de existencia 134.
lerna ¡ERR! inicio del hilo.... salió 134

12. Para aceptar el certificado autofirmado en el navegador web, en un navegador, abra una pestaña parahttps://localhost:9300 y aceptar el certificado. El puerto 9300 es el valor que se utiliza endevServerConfig en elapp-config.json archivo.

13. Comenzar Centro de pedidos de próxima generación abriendo una pestaña en un navegador parahttps://localhost:7443/order-management .
    Nota: El puerto predeterminado es 7443. Si configuras elOH_BASE_HTTPS_PORT propiedad en eldevtoolkit_docker/compose/om-compose.properties archivo, utilice ese número de puerto.
14. Haga clic en su nuevo elemento de menú en el menú de navegación de la izquierda.