Compilação Front-End para SPA Angular

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 opção frontendModule como angular.

Visão geral

Este projeto foi inicializado com a CLI Angular.

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

start 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 foi implantado para AEM pelo menos uma vez (mvn clean install -PautoInstallPackage na raiz do projeto).

Depois de executar o start npm no diretório ui.front-end, seu aplicativo será aberto automaticamente no navegador (no caminho http://localhost:4200/content/${appId}/${country}/${language}/home.html). Se você fizer edições, a página será recarregada.

Se você estiver recebendo erros relacionados ao CORS, é possível configurar AEM da seguinte maneira:

  1. Navegue até o Configuration Manager (http://localhost:4502/system/console/configMgr)
  2. Abra a configuração da "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: OPTIONS

npm test

npm test

Este comando inicia o corredor de teste Karma. Consulte a documentação angular sobre como executar 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 a implantação para obter mais informações.

Além disso, um ClientLib AEM é gerado do aplicativo usando o pacote aem-clientlib-generator.

Consulte a documentação geral do módulo ui.front-end para obter mais informações sobre como AEM ClientLibs são usados pelo arquétipo de projeto.

Suporte a navegador

Por padrão, esse projeto usa a opção padrão Browserslist para identificar navegadores de públicos alvos. 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.

Nesta página