Generación y estructura de Angular 4

Configura en minutos un entorno sólido para Angular 4: instala Node.js y npm, añade Angular CLI de forma global, crea un proyecto con ng new, ejecútalo con ng serve y comprende la estructura de carpetas esencial como src, app, assets, environments, index.html y styles. Con estos pasos, tendrás un flujo confiable desde la instalación hasta el navegador.

¿Cómo instalar Node.js y verificar npm?

Instala Node.js desde su sitio oficial: busca en Google y entra a la sección Download. Descarga el instalador para tu sistema (Mac, Windows o Linux) y sigue el asistente. En Mac, te pedirá tu contraseña. La instalación es rápida.

Verifica que npm quedó disponible. Aunque no escribirás código en Node, sí necesitas el manejador de paquetes para instalar dependencias.

Comando clave:

npm -v

• Si ves un número de versión, npm está listo.
• La versión puede variar: cualquier versión igual o superior a la mostrada por el instructor funciona.

¿Cómo instalar Angular CLI y generar tu primer proyecto?

Busca en Google “Angular CLI” y sigue la guía oficial. La instrucción base es instalarlo globalmente con npm. Si aparece un error de permisos, repite el comando con privilegios de administrador usando sudo.

Comandos clave:

# instalación global
npm install -g @angular/cli

# si hay error de permisos  sudo npm install -g @angular/cli

Al terminar, crea el proyecto con ng new. La herramienta genera el árbol de directorios y configura los preprocesadores: convierte TypeScript a JavaScript y, si usas Sass, a CSS.

ng new Platzi Square
cd Platzi Square

Para ejecutarlo, usa ng serve. Este comando hace la transpilación y parte de la compilación, y levanta un server de desarrollo.

ng serve

Si el navegador marca que el sitio no puede ser alcanzado al abrir la URL que muestra la CLI, usa la IP local. Mantén el puerto tal como aparece en la salida de la herramienta.

• Abre: 127.0.0.1:puerto en tu navegador.
• El puerto identifica dónde corre tu aplicación: no lo cambies.

Con esto, verás tu app de Angular 4 funcionando en el navegador con dos comandos clave: ng new y ng serve.

¿Qué estructura de carpetas y archivos crea Angular 4?

Abre el proyecto en tu editor. Verás muchos directorios. node_modules es extenso y no necesitas tocarlo. La atención se centra en src, donde trabajarás el 95% del tiempo.

Dentro de src:

• app: contiene el código principal de la aplicación.
• assets: guarda imágenes, audios y archivos descargables.
• environments: define ambientes de desarrollo, producción y pruebas.
• index.html: es el archivo que el navegador carga; ahí corre toda la app.
• styles: coloca aquí los estilos CSS globales.

Además, la CLI instala dependencias necesarias para generar proyectos, correrlos en el navegador y desplegarlos en un servidor externo. Otros archivos del proyecto los usa Angular internamente y no hace falta modificarlos.

¿Te fue útil esta guía paso a paso para iniciar con Angular 4? Cuéntame en los comentarios qué parte te gustaría profundizar o qué error te gustaría resolver.