En esta sección, aprenderás cómo construir y desplegar aplicaciones Angular. Este proceso es crucial para llevar tu aplicación desde el entorno de desarrollo hasta un entorno de producción donde los usuarios finales puedan acceder a ella.

La construcción de una aplicación Angular implica compilar y empaquetar el código fuente en un formato optimizado para su despliegue en un servidor web. Este proceso incluye:

• Compilación: Transpilar TypeScript a JavaScript.
• Minificación: Reducir el tamaño de los archivos JavaScript y CSS.
• Empaquetado: Agrupar todos los archivos necesarios en un conjunto de archivos estáticos.

Angular CLI proporciona un comando sencillo para construir tu aplicación:

Este comando genera una carpeta dist/ que contiene los archivos optimizados y listos para el despliegue.

El comando ng build acepta varias opciones que puedes utilizar para personalizar el proceso de construcción:

• --prod: Construye la aplicación en modo producción.
• --output-path: Especifica el directorio de salida.
• --base-href: Establece la URL base para todas las rutas de la aplicación.

Ejemplo:

Una vez que tu aplicación está construida, puedes desplegarla en cualquier servidor web. Aquí hay algunos pasos generales para desplegar tu aplicación en un servidor web típico:

1. Construir la Aplicación: Usa el comando ng build --prod para generar los archivos optimizados.
2. Subir Archivos al Servidor: Usa un cliente FTP o cualquier otro método para subir los archivos de la carpeta dist/ a tu servidor web.
3. Configurar el Servidor: Asegúrate de que tu servidor esté configurado para servir archivos estáticos y manejar rutas de Angular.

Firebase Hosting es una opción popular para desplegar aplicaciones Angular debido a su simplicidad y eficiencia. Aquí están los pasos para desplegar tu aplicación en Firebase Hosting:

1. Instalar Firebase CLI:

   npm install -g firebase-tools
   

2. Iniciar Sesión en Firebase:

   firebase login
   

3. Inicializar Firebase en tu Proyecto:

   firebase init
   

   Selecciona "Hosting" y sigue las instrucciones para configurar Firebase Hosting en tu proyecto.

4. Construir la Aplicación:

   ng build --prod
   

5. Desplegar la Aplicación:

   firebase deploy
   

GitHub Pages es otra opción para desplegar aplicaciones Angular, especialmente para proyectos de código abierto. Aquí están los pasos para desplegar tu aplicación en GitHub Pages:

1. Instalar Angular CLI GitHub Pages:

   npm install -g angular-cli-ghpages
   

2. Construir la Aplicación:

   ng build --prod --base-href "https://<username>.github.io/<repository>/"
   

3. Desplegar la Aplicación:

   ngh --dir=dist/<project-name>
   

1. Construye tu aplicación Angular usando el comando ng build --prod.
2. Configura Firebase Hosting en tu proyecto siguiendo los pasos mencionados anteriormente.
3. Despliega tu aplicación en Firebase Hosting y verifica que esté funcionando correctamente.

1. Construir la Aplicación:

   ng build --prod
   

2. Inicializar Firebase:

   firebase init
   

   Selecciona "Hosting" y sigue las instrucciones.

3. Desplegar la Aplicación:

   firebase deploy
   

En esta sección, hemos cubierto los conceptos básicos de la construcción y el despliegue de aplicaciones Angular. Aprendiste a usar el comando ng build para construir tu aplicación y exploraste diferentes opciones de despliegue, incluyendo servidores web, Firebase Hosting y GitHub Pages. Con estos conocimientos, estás listo para llevar tus aplicaciones Angular desde el desarrollo hasta la producción.

En la próxima sección, exploraremos el uso de Angular CLI para mejorar tu flujo de trabajo de desarrollo.