Para comenzar con Angular, en primer lugar, se requiere tener instalado en tu computador NodeJS y NPM. Puedes verificar dicha instalación con el comando node -v y npm -v.
TIP: Se recomienda utilizar siempre versiones pares de NodeJS (10, 12, 14) ya que a estas se les darán mantenimiento a lo largo de muchos años.
Comienza instalando el CLI de Angular con el comando npm install -g @angular/cli. Nótese el -g que indica que instalaremos Angular de manera global en tu computador para la posterior creación de tu primer proyecto.
Pero... ¿Qué es un CLI?
CLI son las siglas de Common Line Interface o Interfaz de Línea de Comandos. Son programas para darle ordenes al computador y ejecutar tareas y procesos a través de comandos de texto.
Luego de la instalación del Angular CLI, puedes utilizar ng version para corroborar la versión instalada de Angular (actualmente v13). Angular lanza una nueva versión cada 6 meses introduciendo mejoras. No debes preocuparte por utilizar una o varias versiones detrás de la actual. Las versiones de Angular son totalmente compatibles entre sí y no tendrá problemas tu aplicación.
Tu primer proyecto
Para crear tu primer proyecto, basta con el comando ng new myFirstProject. El CLI de Angular te realizará las siguientes preguntas:
Would you like to add Angular routing?Which stylesheet format would you like to use?
Primero pregunta si deseas emplear Angular Routing para la creación de rutas en tu aplicación. Se recomienda contestar siempre Yes, ya que, rara vez, una app no tendrá rutas. La segunda pregunta que realiza es si se desea utilizar un preprocesador de CSS pudiendo escojer entre SCSS, SASS, LESS o no utilizar un preprocesador. Se recomienda utilizar SCSS ya que es el más utilizado en la industria.
Luego de la creación de tu primer proyecto (puede demorar unos minutos en crearse) es hora de correr el servidor de desarrollo que Angular trae para hacer pruebas.
Ingresamos al directorio de nuestro proyecto:
cd myFirstProject
Y lanzamos el servidor de desarrollo con:
ng serve
Este comando preparará la aplicación para un entorno de desarrollo, no debe usarse en entornos productivos. Si ingresamos a localhost:4200/ podrás observar tu primera aplicación de Angular.
Para los que no saben como se llegó a esa pantalla y están en windows: Primero abran PowerShell desde el inicio como administrador y se les abrirá la consola.
Despues de verificar las versiones pueden instalar Angular con este comando: npm install -g @angular/cli
Luego de hacer los demas pasos a veces sale un error que dice algo asi como: Set-ExecutionPolicy, lo pueden solucionar con este comando: Set-ExecutionPolicy Unrestricted y le dicen que sí. Listo!
Si al momento de verificar en PowerShell la version de node y genera error que no reconoce el comando debes descargar desde la pagina oficial de https://nodejs.org/es/download/ ya instalado si te debe mostrar la version, y si al momento de verificar la version de Angular con ng version y te genera el error de que no se puede cargar el archivo porque la ejecución de scripst está deshabilitada colocas el comando set-ExecutionPolicy Unrestricted y te funciona perfectamente :D
Asegúrense que la versión de Angular CLI sea compatible con la versión de Node que tengan instalada, en caso de tener problemas les recomiendo usar NVM para manejar diferentes versiones de Node según sus necesidades.
Hola. para aquellos que al momento de crear el proyecto NO les permitió elegir el tipo de preprocesador de hojas de estilo que usa el profesor (scss), les dejo una alternativa para que puedan hacerlo desde el momento de la creación del proyecto:
ng newname-project --style=scss
ng newname-project --style=sass
Cuando cree la aplicación, no me hicieron esas preguntas, que si quería usar preprocesador Sass o scss o si queria que tuviera routing, es la segunda vez que creo una nueva app en Angular… Me podrían responder cómo poder responder a esas preguntas o si en todo caso ya está configurado, como poder configurarlo?
Actualmente instale ANGULAR CLI y tengo la versión 12.2.12, y al realizar la instalación no me pregunto si quería incluir _routing _en mi aplicación y mucho menos si quería un procesador de CSS o nativo.
Alguien sabe como instalar esto? Cuales son los comandos?
Hola, si en esta versión y desde la v8 en adelante hace estas preguntas siempre, ¿Me puedes decir que comando corriste para iniciar el proyecto y que Sistema Operativo lo corres? Puede ser algo con tu SO
Hola, eso de organizations/plazi es lo forma de organización de mis carpetas en mi PC, pero tú lo puedes organizar en donde te quede más cómodo dentro de tu computadora.
Hola a todos, espero que alguien pueda ayudarme: utilizando el comando