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 鈥渘vm鈥 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)