Ambiente de Desenvolvimento

Utilize um sistema operacional Windows 10 x64 com Node.js e npm instalados. O Node.js pode ser gerenciado através do nvm para facilitar a troca de versões.

Instalação do Angular CLI

Execute o comando abaixo para instalar globalmente o pacote do Angular CLI:

npm install -g @angular/cli

Verificação da Instalação

Confirme a instalação verificando a versão do CLI:

ng version

Desenvolvimento do Projeto

Para iniciar um novo projeto Angular com roteamento, use o comando:

ng new meu-app-angular --routing

Para criar uma aplicação adicional dentro do workspace, como um módulo de gerenciamento:

ng generate application admin-panel

Para adicionar um módulo específico com roteamento, por exemplo:

ng g m accounts --routing

Para gerar componentes, como uma página inicial:

ng g c dashboard

Resolução de Erros ao Criar Componentes

Em caso de erros de permissão ao executar comandos no PowerShell, ajuste a política de execução:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted

Após isso, os comandos de geração de componentes devem funcionar corretamente.

Executando o Projeto

Para iniciar o servidor de desenvolvimento com abertura automática do navegador, modifique o script no package.json:

"start": "ng serve --open",

Em seguida, execute:

npm run start

Alternativamente, navegue até o diretório do projeto e inicie manualmente:

cd meu-app-angular
ng serve --open

Se encontrar erros relacionados a dependências, verifique as versões do Node.js e reinstale os pacotes conforme necessário. Uma vez resolvido, o aplicativo será acessível em http://localhost:4200.

Implantação do Projeto

Implantação com Nginx

Primeiro, gere uma build de produção. Se o aplicativo for servido de um subdiretório, ajuste os parâmetros de base-href e deploy-url:

ng build --configuration production --deploy-url /minha-app/ --base-href /minha-app/

Para ambientes de staging ou QA, especifique a configuração correspondente:

ng build --configuration staging --deploy-url /minha-app/ --base-href /minha-app/

Os artefatos de build são gerados na pasta dist. Transfira esses arquivos para o servidor Nginx, por exemplo, em um diretório montado via Docker.

Integração com .NET 6 WebApi

Para hospedar o frontend Angular junto com uma API em .NET 6, siga estes passos:

1. Crie uma pasta wwwroot no projeto .NET para armazenar os arquivos estáticos.
2. No arquivo Program.cs, adicione middleware para servir arquivos estáticos: ``` app.UseStaticFiles();

3. Modifique o launchSettings.json para definir a URL inicial como a página principal do frontend, como index.html.
4. Configure o arquivo Program.cs para usar um arquivo padrão como página inicial: ``` var defaultOptions = new DefaultFilesOptions(); defaultOptions.DefaultFileNames.Clear(); defaultOptions.DefaultFileNames.Add("index.html"); app.UseDefaultFiles(defaultOptions);

5. Gere a build do Angular sem parâmetros de subdiretório, pois agora será hospedado na raiz: ``` npm run build:staging

   
    Copie o conteúdo da pasta `dist` para `wwwroot` no projeto .NET.
   

6. Ao executar o projeto .NET, o frontend Angular será servido corretamente. Teste localmente e implante em contêineres Docker.

Um Dockerfile padrão para o projeto .NET não requer modificações adicionais para acomodar os arquvios estáticos, desde que a estrutura de diretórios esteja correta.

Implantação com IIS

A implantação no IIS segue procedimentos padrões para sites estáticos, sem configurações especiais adicionais. Apenas aponte o diretório do IIS para a pasta de build gerada.