# Compatibilidade com Frameworks | Angular import DocButton from '~/components/webkit/DocButton.vue'; ## Sobre o Angular [Angular](https://angular.io/) é uma plataforma abrangente para construção de aplicações web. É uma solução completa que inclui tudo o que você precisa para criar aplicações do lado do cliente, desde ferramentas de desenvolvimento até utilitários de teste. O Angular utiliza o TypeScript como sua linguagem principal e segue uma arquitetura baseada em componentes com um sistema robusto de injeção de dependências. **Principais recursos:** - Framework completo com ferramentas e utilitários integrados. - Arquitetura baseada em componentes com suporte a TypeScript. - Sistema poderoso de injeção de dependências. - Roteamento e manipulação de formulários integrados. - Programação reativa com integração ao RxJS. - Recursos de gerenciamento de estado integrados. Você pode realizar o deploy do seu projeto Angular utilizando nossos templates prontos para implantação ou vinculando um projeto existente com o Azion CLI. ## Templates disponíveis | Nome do Template | Caso de uso | Detalhes | |:-------------|:---------|:-----| | Angular Boilerplate | Projeto inicial | | | ButterCMS + Angular Starter Project | Projeto inicial | | ### Realizando deploy de um template no Azion Console 1. Faça login no [Console](https://console.azion.com). 2. Clique no botão **\+ Create**. 3. Navegue para a seção **Templates**. 4. Escolha o template Angular desejado. 5. Conecte sua conta do GitHub. 6. Escolha um nome para sua aplicação. 7. Clique em **Deploy**. ### Realizando deploy de um projeto existente usando importação do GitHub 1. No [Console](https://console.azion.com), clique no botão **\+ Create**. 2. Selecione Importar do Github. 3. Selecione seu repositório. 4. Escolha um nome para a aplicação. 5. Selecione o Preset do **Angular**. 6. Insira o comando de instalação: ``` npm install ``` 7. Clique em **Deploy**. ### Realizando deploy de um template via Azion CLI Você pode usar a Azion CLI para realizar o deploy de um template. :::tip[Dica] Visite o [Guia CLI](/pt-br/documentacao/produtos/azion-cli/visao-geral/#instalar-a-azion-cli) para instruções detalhadas de instalação. ::: 1. No terminal, inicialize o projeto: ```sh azion init ``` 2. Dê um nome ao seu projeto ou pressione `enter` para aceitar a sugestão dada: ```sh ? Your application's name: (black-thor) ``` 3. Escolha o preset Angular: ```sh ? Choose a preset: [Use arrows to move, type to filter] > Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript ... ``` 4. Escolha um dos templates disponíveis. 5. Você pode optar por iniciar um servidor de desenvolvimento local ou não. ```sh Do you want to start a local development server? (y/N) ``` Os próximos passos dependem de sua resposta. - [Se você optou por executar um servidor de desenvolvimento local](#resposta-sim-para-desenvolvimento-local). - [Se você optou por não executar um servidor de desenvolvimento local](#resposta-nao-para-desenvolvimento-local). --- #### Resposta "Sim" para desenvolvimento local 1. Instale as dependências do projeto. Digite `y` quando a interação solicitar: ```sh Do you want to install project dependencies? This may be required to start local development server (y/N) ``` Aguarde até que a instalação seja concluída. Saída: ```sh Your Application was built successfully [Azion] [Server] › ✔ success Function running on port 0.0.0.0:3333, url: http://localhost:3333 ``` 2. No browser, visite `http://localhost:3333/` e você pode ver o seu projeto Angular rodando. #### Realizando deploy do projeto Quando o seu projeto está em execução localmente, você ainda pode implantá-lo. Para fazer isso: 1. Pare a execução no terminal com `control + c`. 2. Acesse a pasta do projeto: ```sh cd [nome-do-seu-projeto] ``` 3. Realize o deploy do projeto: ```sh azion deploy ``` 4. Aguarde enquanto o projeto é construído e implantado na Azion Web Platform. :::note Uma vez que o deployment é iniciado, a Azion abrirá o navegador e levará o usuário a uma página no Azion Console onde os logs e o processo de implantação podem ser monitorados. Se não abrir automaticamente, basta clicar no link fornecido. ::: Após a implementação ser concluída, você receberá um domínio para acessar o seu projeto Astro na plataforma da Azion. Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o domínio fornecido, que deve ser semelhante a `https://xxxxxxx.map.azionedge.net`. --- ##### Resposta "não" para desenvolvimento local Após indicar que você não deseja executar um servidor local, implante o projeto. 1. Digite `y` para a seguinte interação, indicando que deseja implantar o projeto: ```sh Do you want to deploy your project? ``` 2. Instale as dependências do projeto. Digite `y` quando a interação solicitar: ```sh Do you want to install project dependencies? This may be required to start local development server (y/N) ``` 3. Aguarde enquanto o projeto é construído e implantado na plataforma da Azion. :::note Uma vez que o deployment é iniciado, a Azion abrirá o navegador e levará o usuário a uma página no Azion Console onde os logs e o processo de implantação podem ser monitorados. Se não abrir automaticamente, basta clicar no link fornecido. ::: Após a implantação ser concluída, você receberá um domínio para acessar o seu projeto Astro na plataforma da Azion. Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o domínio fornecido, que deve ser semelhante a `https://xxxxxxx.map.azionedge.net`. --- ### Deploy de um projeto local com Azion CLI Você pode utilizar o processo abaixo para realizar o deploy de um projeto local, compatível com as [frameworks suportadas](/pt-br/documentacao/produtos/devtools/azion-edge-runtime/compatibilidade-frameworks/). :::tip[Dica] Visite o [Guia CLI](/pt-br/documentacao/produtos/azion-cli/visao-geral/#instalar-a-azion-cli) para instruções detalhadas de instalação. ::: 1. Dentro da pasta de seu projeto existente, use o comando abaixo para vincular o seu projeto a uma application: ```shell azion link ``` 2. Selecione o preset Angular. 3. A CLI vai lhe guiar pelo restante do processo.