Build de front-end para Angular SPA

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 do Angular. Ou seja, quando você define a opção frontendModule para angular.

Visão geral

Este projeto foi inicializado com o Angular CLI.

Este aplicativo é criado para consumir o modelo de AEM de um site. Ele gerará automaticamente o layout usando os componentes de ajuda do pacote @adobe/cq-angular-editable-components.

Scripts

No diretório do projeto, você pode executar os seguintes comandos.

npm start

npm start

Este comando executa o aplicativo no modo de desenvolvimento, enviando o modelo JSON de uma instância de AEM local em execução em http://localhost:4502. Isso pressupõe que todo o projeto foi implantado em AEM pelo menos uma vez (mvn clean install -PautoInstallPackage na raiz do projeto).

Depois de executar o npm, inicie no diretório ui.frontend, seu aplicativo será aberto automaticamente em seu 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, convém configurar 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: OPTIONS

teste npm

npm test

Este comando inicia o corredor de teste Karma. Consulte a documentação do Angular sobre como executar testes para obter mais informações.

npm run test:debug

npm run test:debug

Este comando inicia o corredor de teste Karma no modo de relógio interativo.

npm executar compilação

npm run build

Este comando cria o aplicativo para produção na pasta de compilação. Ele agrupa o Angular no modo de produção e otimiza a build para obter o melhor desempenho. Consulte a documentação do Angular sobre implantação para obter mais informações.

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

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

Suporte ao navegador

Por padrão, esse projeto usa a opção padrão de Browserslist para identificar navegadores de destino. Além disso, inclui preenchimentos eletrônicos 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 de polyfill e as importações poderão ser removidas.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now