Skip to content

COMANDOS.md

Latest commit

 

History

History
352 lines (273 loc) · 5.98 KB

COMANDOS.md

File metadata and controls

352 lines (273 loc) · 5.98 KB

🛠️ Comandos Útiles - Base Angular App

🚀 Desarrollo

Iniciar el servidor

npm start
# o
ng serve

Iniciar con puerto específico

ng serve --port 4201

Iniciar y abrir en navegador

ng serve --open
# o
ng serve -o

🏗️ Generación de Código

Crear un nuevo componente

# Componente standalone
ng generate component features/mi-feature --standalone

# Componente con routing
ng generate component features/mi-feature --standalone --routing

Crear un servicio

ng generate service core/services/mi-servicio

# En un feature específico
ng generate service features/mi-feature/services/mi-servicio

Crear un guard

ng generate guard core/guards/mi-guard

Crear una directiva

ng generate directive shared/directives/mi-directiva --standalone

Crear un pipe

ng generate pipe shared/pipes/mi-pipe --standalone

Crear un interceptor

ng generate interceptor core/interceptors/mi-interceptor

📦 NgRx

Generar feature store completo

# Instalar NgRx schematics si no está instalado
npm install @ngrx/schematics --save-dev

# Generar feature con store
ng generate @ngrx/schematics:feature features/mi-feature/store/MiFeature --group

Generar acciones

ng generate @ngrx/schematics:action features/mi-feature/store/MiFeature

Generar reducer

ng generate @ngrx/schematics:reducer features/mi-feature/store/MiFeature

Generar effects

ng generate @ngrx/schematics:effect features/mi-feature/store/MiFeature

Generar selector

ng generate @ngrx/schematics:selector features/mi-feature/store/MiFeature

🧪 Testing

Ejecutar tests

npm test
# o
ng test

Tests con coverage

ng test --code-coverage
# o
ng test --no-watch --code-coverage

Ejecutar tests de un archivo específico

ng test --include='**/mi-componente.spec.ts'

🏗️ Build

Build de desarrollo

ng build

Build de producción

ng build --configuration production
# o
npm run build

Build con análisis de bundle

ng build --stats-json
# Luego analizar con:
npx webpack-bundle-analyzer dist/base-angular-app/stats.json

🔍 Análisis y Debugging

Verificar proyecto

ng lint

Formatear código (si tienes prettier)

npx prettier --write "src/**/*.{ts,html,css,scss}"

Ver información del proyecto

ng version

Analizar el bundle size

ng build --configuration production --stats-json
npx webpack-bundle-analyzer dist/base-angular-app/stats.json

📦 Dependencias

Instalar dependencia

npm install nombre-paquete

Instalar dependencia de desarrollo

npm install nombre-paquete --save-dev

Actualizar dependencias

npm update

Verificar dependencias obsoletas

npm outdated

Actualizar Angular

ng update @angular/cli @angular/core

Actualizar NgRx

ng update @ngrx/store @ngrx/effects @ngrx/entity @ngrx/router-store @ngrx/store-devtools

🧹 Limpieza

Limpiar caché

npm cache clean --force

Reinstalar node_modules

rm -rf node_modules package-lock.json
npm install

Limpiar dist

rm -rf dist

🎨 Styling

Generar estilos globales SCSS (si migras a SCSS)

ng config schematics.@schematics/angular:component.style scss

🔧 Configuración

Ver configuración del proyecto

ng config

Cambiar configuración

ng config projects.base-angular-app.architect.build.options.outputPath dist/nueva-ruta

📊 Performance

Servidor con optimizaciones

ng serve --optimization

Build con source maps

ng build --source-map

Análisis de rendimiento

ng build --configuration production --stats-json

🚢 Deployment

Build optimizado para producción

ng build --configuration production --output-path=dist

Verificar tamaño de bundles

ng build --configuration production --stats-json

📝 Otros Comandos Útiles

Abrir documentación de Angular

ng doc ComponentClass

Ejecutar schematic personalizado

ng generate @angular/material:navigation nombre-nav

Agregar capacidades

ng add @angular/material
ng add @angular/pwa

🐛 Debugging

Modo verbose

ng serve --verbose

Ver configuración de webpack

ng eject  # ⚠️ Cuidado: esto es irreversible

Servidor con polling (útil en containers)

ng serve --poll=2000

📱 Progressive Web App (PWA)

Agregar PWA

ng add @angular/pwa

🌐 i18n (Internacionalización)

Extraer textos para traducción

ng extract-i18n

Servir con idioma específico

ng serve --configuration=es

💡 Tips Rápidos

Crear estructura de feature completa

# Crear directorios
mkdir -p src/app/features/mi-feature/{components,services,models,store}

# Generar componente
ng g c features/mi-feature --standalone

# Generar servicio
ng g s features/mi-feature/services/mi-feature

# Generar store
ng g @ngrx/schematics:feature features/mi-feature/store/MiFeature --group

Alias útiles para package.json

{
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --configuration production",
    "test": "ng test",
    "test:ci": "ng test --no-watch --code-coverage",
    "lint": "ng lint",
    "format": "prettier --write \"src/**/*.{ts,html,css}\"",
    "analyze": "ng build --configuration production --stats-json && webpack-bundle-analyzer dist/base-angular-app/stats.json"
  }
}

📚 Recursos

Mantén este archivo como referencia rápida de comandos! 📖