Angular

Guía completa de despliegue para Angular en NStrim

Descripción general

Angular es un framework de aplicaciones web basado en TypeScript desarrollado por Google. Ofrece una solución completa para crear aplicaciones de página única dinámicas con una arquitectura basada en componentes.

Antes de empezar
Asegúrate de tener tu panel abierto - necesitarás las credenciales de Git que se muestran allí. Esta plantilla incluye Tailwind CSS para los estilos.

Inicio rápido

1

Crear repositorio desde plantilla

En tu panel, ve a la pestaña Tools & Deployment. Haz clic en el botón "New Repository", selecciona la plantilla de Angular del menú desplegable, introduce un nombre de repositorio y un subdominio, y luego haz clic en "Create Repository".

2

Clona tu repositorio

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>
3

Instala las dependencias

npm install
4

Inicia el servidor de desarrollo

npm start

Abre http://localhost:4200 en tu navegador.

5

Compila y haz push

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Cada push a Git despliega tu aplicación automáticamente. Consulta tu URL de trabajo del módulo en el panel para ver tu sitio en vivo.

Desarrollo local con Docker

Si no tienes Node.js instalado localmente, puedes usar Docker para ejecutar comandos de Angular. El proyecto incluye un Dockerfile para builds de producción.

¿Qué es Docker?
Docker crea "contenedores" aislados con todo el software que necesitas (Node.js, npm) sin instalarlo en tu ordenador. Piénsalo como una máquina virtual ligera.

Requisitos previos

Instala Docker Desktop para tu sistema operativo (Windows, Mac o Linux).

Ejecutar comandos con Docker

# Run npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Run development server (accessible at localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Build for production
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Nota
Docker es opcional para el desarrollo local. La plataforma NStrim gestiona el despliegue automáticamente: solo necesitas Docker si quieres ejecutar comandos localmente sin tener Node.js instalado.

Estructura del proyecto

Entender dónde se ubican los archivos:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Componente raíz
│   │   ├── app.component.html    # Plantilla raíz
│   │   ├── app.component.css     # Estilos del componente
│   │   ├── app.config.ts         # Configuración de la app
│   │   └── app.routes.ts         # Configuración de enrutamiento
│   ├── index.html                # Archivo HTML principal
│   ├── main.ts                   # Punto de entrada de la aplicación
│   └── styles.css                # Estilos globales (Tailwind)
├── public/                       # Recursos estáticos
├── angular.json                  # Configuración de Angular CLI
├── package.json                  # Dependencias y scripts
├── tailwind.config.js            # Configuración de Tailwind CSS
├── tsconfig.json                 # Configuración de TypeScript
└── Dockerfile                    # Configuración de build Docker

Tareas comunes

Crear un nuevo componente

ng generate component components/my-component

Crear un nuevo servicio

ng generate service services/my-service

Añadir una ruta

Edita src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Usar Tailwind CSS

Tailwind viene preconfigurado. Usa las clases directamente en tus plantillas:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Comandos útiles

npm start Iniciar el servidor de desarrollo (puerto 4200)
npm run build Compilar para producción
npm test Ejecutar tests unitarios
ng generate component Crear un nuevo componente
ng generate service Crear un nuevo servicio
ng generate --help Listar todos los generadores disponibles

Resolución de problemas

npm install falla con errores de permisos

Causa: Problemas de permisos con la caché de npm o node_modules.

Solución: Elimina la carpeta node_modules y el archivo package-lock.json, y luego ejecuta npm install de nuevo.

El puerto 4200 ya está en uso

Causa: Otro proceso está usando el puerto 4200.

Solución: Usa otro puerto: ng serve --port 4201 o detén el otro proceso.

Errores de módulo no encontrado

Causa: Dependencias no instaladas o corruptas.

Solución: Ejecuta npm install para instalar todas las dependencias.

Los cambios no se reflejan en el navegador

Causa: Caché del navegador o recarga en vivo no funciona.

Solución: Recarga forzada (Ctrl+Shift+R o Cmd+Shift+R) o reinicia el servidor de desarrollo.

El build falla tras el despliegue

Causa: Errores de compilación o dependencias faltantes.

Solución: Ejecuta npm run build localmente primero para comprobar errores antes de hacer push.

Flujo de despliegue

Cada vez que haces push de tu código a Git, tu aplicación se compila y despliega automáticamente:

Cambio de código git push npm run build Despliegue a nginx ¡En vivo!

La URL de tu aplicación desplegada sigue este formato: 

https://<your-subdomain>-<repo-name>.<session-domain>

Ejemplo: https://student01-module-a.demo.nstrim.app

Para más información, visita la documentación oficial de Angular.