Configuración inicial de Angular 20 para proyectos con Firebase

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.

ng version

• 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.