Instalación de Angular CLI

2/21
Recursos

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.

Aporte creado por: Kevin Fiorentino.

Aportes 27

Preguntas 24

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Verifica versión de Node: node -v

Verifica versión de npm: npm -v

Instala el CLI de Angular: npm -g @angular/cli

Verifica tu instalación: ng version

Crea tu primer proyecto: ng new my-project

Ejecuta el servidor de desarrollo: ng serve Dentro de la carpeta de tu proyecto.

RESUMEN:

  • VERIFICAR VERSIÓN DE NODE
    -> node -v
    -> node --version

  • VERIFICAR VERSIÓN DE NPM
    -> npm -v
    -> npm --version

  • INSTALAR EL CLIENTE DE COMANDOS DE ANGULAR
    -> npm i -g @angular/cli

  • VERIFICAR VERSIÓN DE ANGULAR CLI
    -> ng version

  • CREAR TU PRIMER APLICACIÓN
    -> ng new my-store

  • EJECUTAR UN SERVIDOR PARA VER NUESTRO PROYECTO
    -> ng serve

Se menciona como preprocesador de hojas de estilos Sass pero la opción que escoge no es la tercera Sass sino la segunda "SCSS [ https://sass-lang.com/documentation/syntax#scss "

el preprocesador que usa en el curso es scss, yo creo que se confundio cuano dijo sass…

Si estas utilizando MAC, para instalar el CLI de Angular:

sudo npm i -g @angular/cli

me dio este error:

Warning: The current version of Node (16.11.0) is not supported by Angular.

verificando version de Node: node -v
Version de npm : npm -v
en mi caso no tenia ninguno de los anteriores intalado y lo qu ehice fue instalarlos con los comandos siguientes pero antes corriendo la actualizacion:
sudo apt-get update
sudo apt install nodejs
sudo apt install npm
y luego el cli de angular:
sudo apt i -g @angular/cli

y haciendo esto pude seguir al profesor.

Si tenemos algun problema con el cli podemos desistalar e instalar

npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/[email protected]
ng version

esperaba este curso con ansías gracias!!!

Para instalacion en wsl con Ubuntu por si les aparece errores por la versionamiento del Node https://ubunlog.com/angular-instala-framework-ubuntu/#Instalacion_de_NodeJs_y_NPM

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!

El comando ng new crea una carpeta de espacio de trabajo de Angular y genera un nuevo esqueleto de aplicación. Un espacio de trabajo puede contener múltiples aplicaciones y bibliotecas. La aplicación inicial creada por el comando ng new está en el nivel superior del espacio de trabajo.

No me pregunto nada, solo se instalo

Comandos Resumidos de clase:

Verifica versión de Node: node -v

Verifica versión de npm: npm -v

Instala el CLI de Angular: npm i -g @angular/cli

Verifica tu instalación: ng version

Crea tu primer proyecto: ng new my-project

Ejecuta el servidor de desarrollo: ng serve Dentro de la carpeta de tu proyecto.

Esto me ayudó a instalar nodejs en linux mint:

https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-es

La tercera forma de instalación fué la que me sirvió a mi y te permite saltar de una versión de nodejs a otra con comandos que usan “nvm” que es como los comandos de git.

Crear nueva aplicación ng new "nombre"

Para actualizar NodeJs, fácil y sin tanto pedo, consultar el siguiente vinculo:
https://github.com/nodesource/distributions/blob/master/README.md

De esta forma se puede actualizar en versiones de Linux derivadas de Debian o Ubuntu:


Node.js LTS (v16.x):

# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# Using Debian, as root
curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
apt-get install -y nodejs


Cuando cree la aplicación, no me hicieron esas preguntas, que si quería usar preprocesador Sass o scss, es la segunda vez que creo una nueva app en Angular… Alguien me podría responder cómo verificar si estoy utilizando el mismo preprocesador que el profesor o como poder configurarlo si en tal caso no estoy utilizando ese preprocesador de CSS?

por si quiere cambiar la versión de mongo pueden hacerlo con nvm(node version manager)

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular/[email protected]12.2.10',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v16.11.0', npm: '8.0.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/[email protected]0.1202.10',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v16.11.0', npm: '8.0.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/[email protected]12.2.10',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v16.11.0', npm: '8.0.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@angular-devkit/[email protected]12.2.10',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v16.11.0', npm: '8.0.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@schematics/[email protected]12.2.10',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v16.11.0', npm: '8.0.0' }
npm WARN EBADENGINE }
npm WARN deprecated [email protected]3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]5.1.5: this library is no longer supported
npm WARN deprecated [email protected]2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 235 packages, and audited 236 packages in 12s

23 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice 
npm notice New minor version of npm available! 8.0.0 -> 8.1.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.0
npm notice Run npm install -g [email protected]8.1.0 to update!
npm notice 

Profe deberías sacar un curso actualizado de Ionic

Comandos para ver la versión de node:
-> node -v
-> node --version
Puedes ver la versión de esas dos formas, lo mismo para npm.

Excelente , el curso, Saludos

Pero si funciona

Tengo Linux Mint y me daba errores al instalar el CLI de Angular, lo solucione precediendo el comendo con sudo

creacion del nuevo programa.

ng version

Angular CLI: 12.2.7
Node: 14.17.6
Package Manager: npm 6.14.15
OS: linux x64

Angular:

Package Version

@angular-devkit/architect 0.1202.7 (cli-only)
@angular-devkit/core 12.2.7 (cli-only)
@angular-devkit/schematics 12.2.7 (cli-only)
@schematics/angular 12.2.7 (cli-only)