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
¿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.
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:
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.
Hernán Giraldo
Si habíamos instalado una versión de Angular-CLI previamente y queremos actualizarla, debemos ejecutar los siguientes comandos:
1. npm uninstall -g @angular/cli
2. npm cache clean
3. npm install -g @angular/cli@latest
NOTA: ejecutarlos con sudo de ser necesario.
ALVARO JOSE VEGA PLATA
Buen aporte en caso de tener previamente una instalación de Angular CLI y tener una instalación limpia del mismo.
Jherom Chacon
Una nota muy importante a usar cada cierto tiempo
Danny Velásquez
Me funciono con tranquilamente
Sergio Daniel Xalambrí
Creo que el profesor tiene algo mal configurado en su computadora 😛, nunca ví que funcione mal localhost
Wilson Naranjo
localhost funciona perfecto, los navegadores si entienden siempre y cuando si encuentre definido en el archivo de hosts de la maquina. 😃
Víctor Hugo Rivas Sánchez
Julio César Olguín Serna
Solo falto que en el paso 3 tienes que entrar al directorio creado y luego ejecutas el comando.
Víctor Hugo Rivas Sánchez
Eso es correcto compañero
habib borge
ng serve --open
abre directamente el proyecto en el navegador web desde la consola.
Maurilio Lopez Martinez
también funciona solo con
ng serve -o
Roberto Alessandro Castro Montoya
Gracias
Luis Daniel Caraballo
Hola muchachos, cuando creo un nuevo proyecto usando ng new me pregunta si deseo agregar Angular routing y que formato de stylesheet deseo usar.
Para continuar con el curso seleccione No y CSS respectivamente, pero no se a que se refieren con el termino Angular Routing y si debo agregarlo o no. Debo ignorarlo por el momento??
Fernando Espinoza
Si alguien esta trabajando en Windows por cualquier razon, puede usar Laragon
Inicialmente era una herramienta para Laravel, pero se pueden bajar una version con el npm instalado… Creará una carpeta www en el disco C:/laragon/www y ahi pueden comenzar distintos proyectos, tanto en angular como en otras cosas… y se manera con una terminal con comandos de Linux 😉
Jesus Soto
Muy buen dato ya lo esoty probando asi.
Muchas gracias
Fernando Espinoza
JesusSotoT espero que te funcione 😄
Hans Vogt
Cuando intenten instalar el CLI como el video es un poco viejo se instalara la ultima version, recomiendo instalar exactamente la version 4 para completar el curso, cuando esten en la parte de instalar el cli pueden usar este comando para la version 4
npm i @angular/cli@1.4 -g
Ulises Pérez Noguerón
Yo use este comando!
npm install -g @angular/cli@1.4
Carlos Mauricio Pinell Rengel
Hola, ayuda por favor, estoy instalando Angular 4 en Windows 10,me aparece la pregunta ¿Would you like to add Angular routing? ¿Que pongo?
Danny Velásquez
Siempre ejecutar el comando npm install -g @angular/cli con permisos de super usuario (root)
sudo npm install -g @angular/cli
Gustavo Pérez Machado
no es necesario, de echo el mismo npm recomienda no usar el comando con sudo, en este link esta una guia de como evitarlo
Danny Velásquez
Muchas gracias
Omar Crespo
Pueden usar npx que no instala los paquetes en nuestros PCs si no que descarga los paquetes para un solo uso y siempre descarga la versión mas nueva
npx -p @angular/cli ng new
Eso si deben tener la ultima version de npm 😉
npm i -g npm
Omar Crespo
Felipe Moreno
Por fin una respuesta para mi problema, muchas gracias. Excelente aporte.
Agustin Osses
Con el comando "ng serve -o" te abre el proyecto directamente en el navegador.
Ulises Pérez Noguerón
Para continuar con el curso yo instale la versión 4 de este modo.
npm install -g @angular/cli@1.4
Víctor Hugo Rivas Sánchez
Seria bueno actualizar este curso a Angular 7 u 8
Edwar Enrique Vilchez Serrano
Buenas tardes al momento de tipear el comando ng new platzisquare salen estas preguntas
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
Al responderlas sea que responda yes o no y seleccione cualquier opción para los estilos despliega este error:
**Schematic input does not validate against the Schema: {“name”:“platzi_square”,“version”:“7.1.1”,“routing”:true,“style”:“css”}
Errors:
Data path “.name” should match format “html-selector”.**
Como puedo solucionarlo, he investigado en la red, pero ninguna respuesta satisface mi necesidad.
Nicolas Paolo Bueno Cavero
No sé si te sirva una respuesta ahora pero creo que estás poniendo una ‘_’ en el nombre (platzi_square) y eso no es posible, prueba con:
ng new platzisqueare
Matias D. Alvarez
Supiste como solucionarlo, me sale lo mismo en Windows..... Desde ya Muchas Gracias
Andres Felipe Jerez Giraldo
Buenas tardes, alguien me podria dar la version exacta de Node, npm, angular CLI, agm/core que estan usando y que funciona para este curso? estoy peleando con el package ahora y no logro hacer andar el mapa por versionamiento
Juan Castro
ProfesorAquí encuentras el repositorio: https://github.com/jesusvillamarin/Angular-curso.
También recuerda que en esta clase encuentras una guía para las versiones de Angular: https://platzi.com/clases/1153-angular-4/8400-versionamiento-en-angular/.
Andres Felipe Jerez Giraldo
baje el git del curso, pero aun asi cuando hago el ng serve despues de la instalacion del agm@core me arroja error de mismatch version de la metadata, por que el modulo espera version 3 y pues yo tengo instalada la version 4, y no se si tenga que ve con la version de mi nvm, ya lo baje inclusive a la que usaban en este curso, la 6 del npm y tampoco funciona :/ que otra cosa puede ser?
Carlos Mauricio Pinell Rengel
Hola, ayuda por favor, estoy instalando Angular 4 en Windows 10, al momento de ejecutar el comando ng new platzisquare me aparece la pregunta: ¿Would you like to add angular Routing?. ¿Debo poner yes?
Andres Felipe Jerez Giraldo
es por que trabajaste con la version de angular cli superior a la 1.4, en las nuevas ya posee las caracteristicas del routing, lo que es un concepto nuevo, no del angular 4
Maria de los Angeles Silva Gutierrez
hola grupo, tengo instalado el node.js version 6.4.1 y de editor Atom
Jherom Chacon
Seteando nuestra aplicacion desde Angular CLI
Jeferson Gonzalez
Hay un error cuando se termina el módulo, al darle siguiente video este no avanza
como punto extra podemos crear aliases para usar un sintaxis sugar en la terminal 😄
Por ejemplo para ubuntu seria:
# ~/.bash_aliases alias ng='npx -p @angular/cli ng'
Y asi ya solo queda usarlo tal cual como lo usa el profesor
ng serve
y siempre lo haremos utilizando la ultima version de angular-cli pero por el contrario, usaremos mas ancho de bando y un poco mas de tiempo dependiendo de nuestra conexión
