Aprende a iniciar un proyecto con Angular 20 y configurar el entorno paso a paso para trabajar con Firebase. Verás cómo comprobar Node, npm y Git, instalar el CLI de Angular, crear el proyecto con la terminal de Windows y abrirlo en Visual Studio Code. Todo claro, directo y sin rodeos.
¿Cómo preparar el entorno para Angular 20 y Firebase?
Antes de crear el proyecto, es clave asegurar que el entorno funciona. La guía muestra cómo abrir PowerShell desde el desktop y verificar que Node, npm y Git estén bien instalados y en el PATH del sistema.
¿Qué versiones verificar en la terminal de Windows?
Usa la terminal para confirmar instalaciones.
node version
npm version
git version
- Confirma que los tres comandos respondan sin error.
- Si hay error: revisa instalación y el PATH en variables de entorno.
- Abre el menú inicio y busca “variables de entorno”.
¿Qué revisar en variables de entorno PATH?
- Que existan entradas de Node, npm y Git en el PATH.
- Que la ruta corresponda a tu instalación real.
- Ajusta según cómo esté configurada tu computadora.
¿Cómo instalar el CLI de Angular y validar la versión 20?
Instala el CLI de Angular de forma global con npm. Recuerda: npm es Node Package Manager, el gestor de paquetes de Node.
npm install-g@angular-cli
Comprueba la instalación y la versión disponible en la terminal.
- Verifica que muestre Angular 20.2 y Node 22.19 como base.
- Con esto, ya puedes usar Angular desde la terminal para proyectos frontend.
¿Cómo crear el proyecto Angular 20-Firebase-Chat con ng new y abrirlo en Visual Studio Code?
Crea un proyecto desde cero con el comando de Angular CLI. Así defines el nombre y respondes a las preguntas de configuración inicial.
ng new Angular 20-Firebase-Chat
Durante la creación, selecciona las opciones indicadas:
- Estilos con CSS.
- Sin server side rendering.
- Dejar “Sourceless” en su manejo original: opción “no”.
- Sin optimización para ningún tipo de inteligencia artificial.
Al finalizar, abre la carpeta del proyecto en Visual Studio Code:
- Menú file: open folder.
- Selecciona la carpeta en el escritorio.
- Verás el proyecto listo para empezar.
Conceptos y habilidades que poner en práctica:
- Framework de Google: uso de Angular 20 para frontend.
- Terminal en Windows: abrir PowerShell en el directorio correcto.
- Variables de entorno y PATH: validar rutas de Node, npm y Git.
- Angular CLI: instalación global y uso de
ng version y ng new.
- Node Package Manager (npm): instalar paquetes globales.
- Decisiones de configuración: estilos con CSS, sin SSR, sin optimización para IA.
- Editor: abrir el proyecto en Visual Studio Code para trabajar.
¿Quieres que profundicemos en los comandos de ng o en la configuración inicial del proyecto? Comparte tus dudas y comenta qué parte te gustaría ver paso a paso.
