--- name: azion-desenvolva-com-angular description: >- Crie um app Angular a partir de um template da Azion, de um repositório do GitHub ou da Azion CLI, e faça o deploy dele em um domínio da Azion. --- # Desenvolva com Angular Você pode colocar um app Angular na Azion de três formas: fazer o deploy de um template pelo Azion Console, importar o seu repositório do GitHub ou usar a [Azion CLI](/pt-br/documentacao/devtools/cli/). Cada rota termina com o app no ar em um domínio da Azion. A Azion serve um app Angular como uma aplicação estática. A etapa `ng build` grava o app compilado em `./dist`, o deploy copia essa pasta para um bucket de storage, e uma [application](/pt-br/documentacao/plataforma/applications/) entrega o app. Para ver de quais outros frameworks a Azion faz o build, consulte [Compatibilidade com web frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks/). --- Escolha a sua rota primeiro. Os pré-requisitos e o procedimento de deploy a seguir mudam com essa escolha. ## Pré-requisitos - Uma conta da Azion. Para criar uma, consulte [Criar uma conta](/pt-br/documentacao/fundamentos/criar-uma-conta/). **Console** - Acesso ao Azion Console. Para entrar, consulte [Como acessar o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console/). - Uma conta do GitHub, que o formulário do template conecta quando pede uma. **GitHub** - Acesso ao Azion Console. Para entrar, consulte [Como acessar o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console/). - Uma conta do GitHub. - Um repositório do GitHub com um projeto Angular. **CLI** - A Azion CLI, instalada e com login feito. Para configurá-la, consulte [Primeiros passos com a Azion CLI](/pt-br/documentacao/devtools/cli/primeiros-passos/). - Node.js 18 ou posterior, com npm. - Um terminal e um editor de código. --- ## Templates do Angular Um template Angular é um projeto inicial completo do qual a Azion faz o build e o deploy para você. Na rota do Console, você escolhe um destes: | Template | Uso | | -------------------------------------------------------------------------------------------------------------- | --------------- | | [Angular Boilerplate](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/angular-boilerplate/) | Projeto inicial | | Angular with ButterCMS Starter Project | Projeto inicial | O Angular Boilerplate tem um guia próprio, com link na tabela. Para mais informações sobre o outro template, consulte [Marketplace da Azion](/pt-br/documentacao/plataforma/marketplace/). Na rota da CLI, o seletor de templates do `azion init` mostra todos os templates do preset Angular. --- ## Fazer o deploy do app Todas as rotas fazem o build do projeto Angular e criam os recursos da Azion que o servem. Use o painel que corresponde à rota que você escolheu: **Console** Para fazer o deploy de um template Angular pelo Azion Console: 1. **Abra os templates** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Encontre os templates Angular** Em **Search by name, framework, or keyword**, digite `Angular`. 3. **Selecione o template para o deploy** 4. **Conecte sua conta do GitHub** Se o formulário mostrar **GitHub Connection**, selecione **Connect with GitHub** e instale o [Azion GitHub App](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/azion-github-app/). 5. **Selecione um Git Scope** Em **Git Scope**, selecione o escopo do template. 6. **Preencha as configurações que o template pede** 7. **Selecione Deploy** A página de deploy abre com o **Deploy Log**, que acompanha o build. Quando o deploy termina com sucesso, a página mostra **Successfully created!**, a URL do domínio e um botão **Manage** que abre a application. **GitHub** Para fazer o deploy de um projeto Angular a partir do seu repositório do GitHub: 1. **Abra o Import from GitHub** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Import from GitHub**. 2. **Selecione o card de importação** Na aba **Import from GitHub**, selecione o card. A página **Import from GitHub** abre. 3. **Conecte sua conta do GitHub** Se nenhuma conta do GitHub estiver conectada ainda, selecione **Connect with GitHub** em **GitHub Connection**. 4. **Selecione o repositório** Selecione um **Git Scope** e depois selecione o **Repository** com o projeto Angular. 5. **Dê um nome à application** Em **General**, digite um **Application Name**. O nome do repositório preenche o campo primeiro, e o bucket de storage e a [function](/pt-br/documentacao/plataforma/functions/) reutilizam o nome que você mantiver. 6. **Selecione o preset Angular** Defina **Preset** como *Angular*. 7. **Defina o diretório raiz** Em **Root Directory**, mantenha `/` se o projeto Angular estiver na raiz do repositório. 8. **Digite o comando de instalação** Em **Install Command**, digite `npm install`. 9. **Selecione Deploy** A página de deploy abre com o título `Deploy:` e o nome da application, e o **Deploy Log** acompanha o build. Quando o deploy termina com sucesso, a página mostra **Successfully created!** e a URL do domínio. Para definir **Variables** ou qualquer outro campo do formulário de importação, consulte [Importe um projeto do GitHub](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/importar-um-projeto-existente-do-github/). **CLI** Para criar o projeto, execute `azion init` com um nome de projeto e depois selecione *Angular* no seletor de presets e um template no seletor de templates: ```bash azion init --name my-site --auto -y ``` Com `-y`, o comando instala as dependências. Com `--auto`, ele não pergunta se deve iniciar um servidor de desenvolvimento local nem se deve fazer o deploy. Para as perguntas que ele faz sem essas opções, consulte [Azion CLI init](/pt-br/documentacao/devtools/cli/init/). Com o template *Angular Boilerplate*, a saída é: ```text ? Choose a preset: [Use arrows to move, type to filter] > AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript Vitepress Vue Vuepress ? Choose a preset: Angular ? Choose a template: [Use arrows to move, type to filter] > Angular Boilerplate Angular with ButterCMS Starter Project Clean Angular App with Sanity ? Choose a template: Angular Boilerplate Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies … added 867 packages, and audited 868 packages in 35s 199 packages are looking for funding run `npm fund` for details 12 vulnerabilities (2 moderate, 10 high) To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. … [Azion] [Build] › ℹ info Using preset: angular [Azion] [Build] › ✔ success Build completed successfully with only azion.config [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json If you want to start a local development server later, run 'azion dev' Make sure to change to the new working directory before running building or deploying your project If you want to deploy your application later, run 'azion deploy' Make sure to change to the new working directory before running building or deploying your project Your application my-site was initialized successfully ``` O projeto fica em uma pasta `my-site`. O `azion.config.cjs` do projeto define o preset `angular` e envia `./dist` para um bucket de storage que os workloads só podem ler. O mesmo arquivo adiciona uma regra chamada `Redirect to index.html`, que reescreve as rotas para `/index.html` para que o Angular trate o roteamento no navegador. Para todas as configurações do arquivo, consulte [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js/). Para fazer o build do app, vá para a pasta do projeto e execute `azion build`: ```bash cd my-site azion build ``` O Azion Bundler executa `ng build` com o preset `angular` e grava o app compilado em `dist`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset angular … [Azion] [Build] › ℹ info Using preset: angular [Azion] [Pre-Build] › ℹ info Starting pre-build... … [Angular] › ℹ info > angular-boilerplate@22.0.2 build > ng build --output-path=./dist [Angular] › ℹ info ❯ Building... [Angular] › ℹ info ✔ Building... [Angular] › ℹ info Initial chunk files | Names | Raw size | Estimated transfer size main-JHJQWKMP.js | main | 218.66 kB | 59.77 kB polyfills-5CFQRCPP.js | polyfills | 34.59 kB | 11.33 kB styles-5INURTSO.css | styles | 0 bytes | 0 bytes | Initial total | 253.24 kB | 71.11 kB Application bundle generation complete. [1.759 seconds] - 2026-01-01T12:00:00.833Z [Angular] › ℹ info Output location: /my-site/dist [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "angular" preset. [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-site/.edge/manifest.json Your Application was built successfully ``` Para fazer o deploy do app, execute `azion deploy` a partir da pasta do projeto: ```bash azion deploy ``` O `azion deploy` envia o projeto e abre a página do Console que acompanha o deploy, e imprime a URL dessa página para o caso de nenhum navegador abrir. No final, ele imprime a URL do domínio do app. Para a saída completa e as flags que mudam um deploy, consulte [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy/). Para testar o app na sua máquina primeiro, consulte [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando/). Para um projeto Angular que você já tem, execute `azion link` na pasta dele e selecione o preset Angular. Para mais informações, consulte [Azion CLI link](/pt-br/documentacao/devtools/cli/link-comando/). --- ## Verificar o site Cada rota termina com a URL do domínio da Azion do app, no formato `https://xxxxxxxxxx.map.azionedge.net`. A página de deploy do Console mostra a URL, e o `azion deploy` a imprime como última etapa. Abra a URL em um navegador para carregar o app Angular. O primeiro deploy pode levar vários minutos para responder a partir de todas as localidades; os deploys seguintes levam cerca de dois minutos. Uma localidade que ainda não recebeu o app retorna uma página `404` com o texto `There's nothing here yet`. Quando receber essa página, aguarde e solicite a URL novamente. --- ## Próximos passos - [Compatibilidade com frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks.md): Veja os frameworks e presets dos quais a Azion faz o build além do Angular. - [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy.md): Leia a saída do deploy e as flags que mudam um deploy. - [Importe um projeto do GitHub](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/importar-um-projeto-existente-do-github.md): Configure todos os campos da importação do GitHub, incluindo as variáveis. - [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js.md): Altere o bucket, o cache e as regras que o preset Angular gera.