eCosif — Frontend Angular

🚀 Como Rodar Localmente - ecosif-angular

📋 Visão Geral

Este guia detalhado explica como configurar e executar o projeto ecosif-angular localmente para desenvolvimento.

✅ Pré-requisitos

Software Necessário

Verificar Instalação

# Verificar versões
node -v       # >= 16.10.0 ou >= 18.0.0
npm -v        # >= 6.0.0
git --version # Qualquer versão recente

📥 Preparar Projeto

1. Clonar Repositório

git clone <repo-url>
cd ecosif-angular

2. Instalar Dependências

# Instalar todas as dependências
npm install

# Isso instalará:
# - Angular 14.2.4
# - CoreUI 4.2.4
# - Bootstrap 5.2.0
# - E todas as outras dependências listadas em package.json

Tempo estimado: 5-10 minutos (dependendo da conexão)

3. Instalar Angular CLI Globalmente (Opcional)

npm install -g @angular/cli@14

# Verificar instalação
ng version

⚙️ Configuração

1. Configurar Environment

O projeto utiliza arquivos de environment para configuração:

Desenvolvimento: src/environments/environment.ts

export const environment = {
  production: false,
  apiUrl: 'http://localhost/ecosif-masterdata',
  authUrl: 'http://localhost/ecosif-auth',
  // ...
};

2. Configurar Proxy (Opcional)

Para evitar problemas de CORS, configure proxy:

Arquivo: src/environments/proxy.conf.json

{
  "/ecosif-auth": {
    "target": "http://localhost:8080",
    "secure": false
  },
  "/ecosif-masterdata": {
    "target": "http://localhost:8081",
    "secure": false
  }
}

Executar com proxy:

ng serve --proxy-config src/environments/proxy.conf.json

🔨 Executar

Modo Desenvolvimento (Padrão)

# Comando principal
npm start

# ou diretamente
ng serve

# Acesse: http://localhost:4200

Com Porta Customizada

ng serve --port 4300
# Acesse: http://localhost:4300

Com Abertura Automática no Navegador

ng serve --open
# ou
ng serve -o

Com HMR (Hot Module Replacement)

ng serve --hmr

Com Configuração de Produção (para testar)

ng serve --configuration production

🐛 Debug

DevTools do Navegador

  1. Abra DevTools (F12)
  2. Vá para Console para ver logs
  3. Vá para Network para ver requisições HTTP
  4. Vá para Sources para debug de código

Logs no Console

A aplicação utiliza console.log para debug em desenvolvimento:

// Exemplo de log
console.log('Dados carregados:', data);

Angular DevTools

Instale extensão do navegador: - Angular DevTools (Chrome) - Angular DevTools (Firefox)

🔧 Comandos Úteis

Build

# Build de desenvolvimento
ng build

# Build de produção
ng build --configuration production

Testes

# Executar testes unitários
npm test

# Executar testes com cobertura
ng test --code-coverage

Linting

# Verificar código
ng lint

Gerar Componente

# Gerar novo componente
ng generate component pages/nova-pagina

# Gerar service
ng generate service service/novo-service

✅ Verificar se Está Funcionando

1. Verificar Servidor

Acesse: http://localhost:4200

Você deve ver a página de login.

2. Verificar Console

Abra DevTools (F12) → Console

Não deve haver erros críticos.

3. Verificar Network

Abra DevTools (F12) → Network

Deve ver requisições carregando recursos.

🚨 Problemas Comuns

Erro: Porta 4200 já em uso

# Usar outra porta
ng serve --port 4300

# ou matar processo na porta 4200
# Linux/Mac:
lsof -ti:4200 | xargs kill -9
# Windows:
netstat -ano | findstr :4200
taskkill /PID <PID> /F

Erro: Módulos não encontrados

# Limpar e reinstalar
rm -rf node_modules package-lock.json
npm install

Erro: CORS

Configure proxy (veja seção Configurar Proxy)

📚 Próximos Passos

Após rodar localmente:

  1. ✅ Verificar se consegue fazer login
  2. ✅ Navegar pelas páginas principais
  3. ✅ Testar funcionalidades básicas
  4. ✅ Começar desenvolvimento

Última Atualização: 2025-12-01