Criando Hub de pedidos de próxima geração aplicativos usando um repositório Angular padrão

O uso de um repositório Angular padrão fornece uma abordagem mais simples e tradicional para um aplicativo de UI Angular. Use esta abordagem se você estiver criando um aplicativo de UI independente e quiser codificá-lo rapidamente, sem muita dependência ou compartilhamento de código.

Sobre esta tarefa

Este procedimento orienta você sobre como criar um Hub de pedidos de próxima geração aplicativo e armazene-o em um repositório Angular básico.

Procedimento

  1. Extraia o Hub de pedidos de próxima geração código. Para mais informações, veja Introdução à personalização Hub de pedidos de próxima geração.
    Observação: O parâmetro de versão para oom-compose.sh extract-orderhub-code comando deve seroms para extrair o Hub de pedidos de próxima geração código. O parâmetro de versãoomoc não é aplicável a Hub de pedidos de próxima geração.
  2. Abra um console e vá para o Hub de pedidos de próxima geração diretório de código. O local padrão édevtoolkit_docker/orderhub-code .
  3. Para ignorar a verificação SSL para interações com registros, defina strict-ssl como falso executando o seguinte comando.
    npm config set "strict-ssl" false
  4. Reinstale a versão mais recente do@buc/schematics para acessar o IBM®-forneceu esquemas executando os seguintes comandos.

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

  1. Crie uma pasta para seu novo aplicativo. O nome da pasta é o nome do módulo.
  2. No console, vá para a pasta que você criou.
  3. Crie um espaço de trabalho e inicialize um novo aplicativo Angular executando o comando a seguir.

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
Observação: Ong new comando requer o--mode=on-prem parâmetro.
O esquema suporta as seguintes opções.
--skip-git
Esta opção não inicializa um GitHub repositório. O padrão é false.
--commit
Esta opção inclui o inicial GitHub informações de commit do repositório. O padrão é true.
--module-name
Essas opções obrigatórias são o nome do módulo. Por exemplo, configurações do aplicativo buc.
--module-short-name
O nome abreviado do módulo. Se o nome do módulo tiver travessões, o nome abreviado deverá ser o texto após o último travessão. Por exemplo, se o módulo for configurações do aplicativo buc, o nome abreviado do módulo deve ser configurações.
Nota: O pacote root-config é gerado com base no module-short-name. Não renomeie nem adicione um prefixo ao module-short-name ou você não conseguirá implementar as personalizações.
--prefix
O seletor HTML a ser usado para componentes gerados. O padrão é cara.
--mode
Defina esta opção como local para gerar código que seja aplicável para Hub de pedidos de próxima geração.
Veja o exemplo a seguir de execução do comando que criará a aplicação Angular.
ng new --collection=@buc/schematics  --module-name=custom-angularrepo
      --module-short-name=angularrepo  --prefix=angularrepo --mode=on-prem
Observação: Se você encontrar um erro semelhante à mensagem a seguir, poderá ignorar o erro com segurança. Esses erros não afetam os ícones usados pelo Centro de pedidos.
Erro: Falha ao compilar o ponto de entrada @carbon/icons-angular/

  1. Se Hub de pedidos de próxima geração contêineres não estão em execução no momento, vá para odevtoolkit_docker/compose diretório e execute o seguinte comando.

./om-compose.sh start orderhub

  1. Crie a versão de desenvolvimento local dofeatures.json arquivo. Para obter informações, consulte Criando os arquivos features.json.
  2. Para testar seu novo aplicativo localmente, copie o arquivofeatures.json arquivo noom-orderhub-base contêiner executando os seguintes 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 o servidor digitando o seguinte comando.

yarn start --host=localhost
Observação: Você vê a seguinte mensagem.
"** Angular Live Development Server está escutando em localhost:<porta>, 
abra seu navegador em https://localhost:<porta>/<módulo>/<rota> **"
Você pode ignorar essa mensagem.

  1. Adicione algum texto que você deseja exibir em seu novo aplicativo atualizando osrc/app/app.component.html arquivo. Por exemplo, para adicionarHello, World!, use o código a seguir.


<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 aceitar o certificado autoassinado no navegador da web, em um navegador, abra uma guia parahttps://localhost:4000 e aceite o certificado. O Porto 4000 é o valor usado nong serve roteiro nopackage.json arquivo.

Observação: Para aceitar o certificado, é agorahttps://localhost:4000 em vez dehttps://bucgenerichost:4000 .

  1. Começar Hub de pedidos de próxima geração abrindo uma guia em um navegador parahttps://localhost:7443/order-management . A porta padrão é 7443. Se você definir oOH_BASE_HTTPS_PORT propriedade nodevtoolkit_docker/compose/om-compose.properties arquivo, use esse número de porta.
  2. Clique no seu novo item de menu na navegação do menu esquerdo.