Creando Centro de pedidos de próxima generación aplicaciones que utilizan un repositorio angular estándar

El uso de un repositorio Angular estándar proporciona un enfoque más simple y tradicional para una aplicación Angular UI. Utilice este enfoque si está creando una aplicación de interfaz de usuario independiente y desea codificarla rápidamente sin mucha dependencia ni uso compartido de código.

Acerca de esta tarea

Este procedimiento le guiará a través de cómo crear un Centro de pedidos de próxima generación aplicación y guárdela en un repositorio Angular básico.

Procedimiento

  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 interacciones con registros, configurestrict-ssl a falso ejecutando el siguiente comando.
    npm config set "strict-ssl" false
  4. Reinstale la última versión de@buc/schematics para acceder al IBM®-Esquemas proporcionados ejecutando los siguientes comandos.

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

  1. Cree una carpeta para su nueva aplicación. El nombre de la carpeta es el nombre del módulo.
  2. En la consola, vaya a la carpeta que creó.
  3. Cree un espacio de trabajo e inicialice una nueva aplicación Angular ejecutando el siguiente comando.

ng new --collection=@buc/schematics \
--module-name=<name-of-the-module> \
--module-short-name=<the-short-name-for-the-module> \
--prefix=<selector-prefix> \
--mode=on-prem
Nota: Elng new El comando requiere el--mode=on-prem parámetro.
El esquema admite las siguientes opciones.
--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.
--module-name
Estas opciones requeridas son el nombre del módulo. Por ejemplo, configuración-de-la-aplicación-buc.
--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 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.
--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.
Vea el siguiente ejemplo de ejecución del comando que creará la aplicación Angular.
ng new --collection=@buc/schematics  --module-name=custom-angularrepo
      --module-short-name=angularrepo  --prefix=angularrepo --mode=on-prem
Nota: Si encuentra un error similar al siguiente mensaje, puede ignorarlo con seguridad. Estos errores no afectan a los iconos utilizados por Centro de pedidos.
Error: no se pudo compilar el punto de entrada @carbon/icons-angular/

  1. 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

  1. Crear la versión de desarrollo local delfeatures.json archivo. Para obtener información, consulte Creación de los archivos features.json.
  2. 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/

  1. Inicie el servidor ingresando el siguiente comando.

yarn start --host=localhost
Nota: Verá el siguiente mensaje.
"** Angular Live Development Server está escuchando en localhost:<puerto>, 
abre tu navegador en https://localhost:<puerto>/<módulo>/<ruta> **"
Puede hacer caso omiso de este mensaje.

  1. Agregue algún texto que desee mostrar en su nueva aplicación actualizando elsrc/app/app.component.html archivo. Por ejemplo, para agregarHello, World!, utilice el siguiente código.


<div class="app-root-custom-angularrepo">
	<div class="app-region-body">
		<div class="app-body-content" *ngIf="isBucTenantChangeSuccess || isBucJwtRefreshSuccess">
			<router-outlet></router-outlet>
		</div>
		<div *ngIf="isInitialState" class="app-loading">
			<div ibmCol>
				<buc-loading [isActive]="isInitialState"></buc-loading>
			</div>
		</div>

Hello World!

	</div>
</div>

  1. Para aceptar el certificado autofirmado en el navegador web, en un navegador, abra una pestaña parahttps://localhost:4000 y aceptar el certificado. El puerto 4000 es el valor que se utiliza en elng serve guión en elpackage.json archivo.

Nota: Para aceptar el certificado, ahora eshttps://localhost:4000 en lugar dehttps://bucgenerichost:4000 .

  1. Comenzar Centro de pedidos de próxima generación abriendo una pestaña en un navegador parahttps://localhost:7443/order-management . 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.
  2. Haga clic en su nuevo elemento de menú en el menú de navegación de la izquierda.