Show Menu
TOPICS×

Compilação front-end para SPAs angulares

Este documento explica os detalhes do projeto criado ao usar o arquétipo para criar um aplicativo de página única (SPA) com base na estrutura Angular. Ou seja, quando você define a
frontendModule
opção para
angular
.

Visão geral

Este projeto foi inicializado com a CLI Angular .
Esse aplicativo foi criado para consumir o modelo AEM de um site. Ele gera automaticamente o layout usando os componentes auxiliares do pacote @adobe/cq-angular-editável-components .

Scripts

No diretório do projeto, é possível executar os seguintes comandos.

início do Npm

npm start
Este comando executa o aplicativo no modo de desenvolvimento, fazendo proxy do modelo JSON de uma instância AEM local em execução em http://localhost:4502. Isso pressupõe que o projeto inteiro tenha sido implantado no AEM pelo menos uma vez (
mvn clean install -PautoInstallPackage
na raiz do projeto).
Depois de executar o npm iniciar no diretório ui.frontenda, seu aplicativo será aberto automaticamente em seu navegador (no caminho http://localhost:4200/content/$/$/$/home.html). Se você fizer edições, a página será recarregada.
Se você estiver recebendo erros relacionados ao CORS, é possível configurar o AEM da seguinte maneira:
  1. Navegue até o Configuration Manager (http://localhost:4502/system/console/configMgr)
  2. Abra a configuração para "Política de compartilhamento de recursos entre origens do Adobe Granite"
  3. Crie uma nova configuração com os seguintes valores adicionais:
    • Origens permitidas: http://localhost:4200
    • Cabeçalhos suportados: Autorização
    • Métodos permitidos: OPÇÕES

teste npm

npm test
Este comando inicia o corredor de teste Karma. Consulte a documentação Angular sobre a execução de testes para obter mais informações.

teste de execução npm:debug

npm run test:debug
Este comando inicia o corredor de teste Karma no modo interativo de observação.

npm run build

npm run build
Este comando cria o aplicativo para produção na pasta build. Ele agrupa o Angular no modo de produção e otimiza a compilação para obter o melhor desempenho. Consulte a documentação Angular sobre implantação para obter mais informações.
Além disso, um AEM ClientLib é gerado do aplicativo usando o pacote aem-clientlib-generator .
Consulte a documentação geral do módulo ui.frontenda para obter mais informações sobre como os ClientLibs do AEM são usados pelo arquétipo de projeto.

Suporte ao navegador

Por padrão, esse projeto usa a opção padrão da lista de navegadores para identificar os navegadores de destino. Além disso, ele inclui preenchimentos poliméricos para recursos de linguagem moderna para suportar navegadores mais antigos (por exemplo, Internet Explorer 11). Se o suporte a esses navegadores não for um requisito, as dependências e importações de polifill poderão ser removidas.