Actualizar Angular CLI y crear proyecto para Angular 5


Angular

Angular CLI es una herramienta de linea de comandos imprescindible para crear nuestros proyectos con Angular, normalmente para poder tener la ultima versión estable de Angular (actualmente la versión 5 es la estable y la versión 6 esta en fase de desarrollo) es necesario actualizar, lo cual aprenderemos a hacer en este articulo.

Puedes acceder al curso gratuito de Angular para aprender más sobre este framework.

Fase previa (NodeJS)

Si estas trabajando con Angular lo más seguro es que tengas instalado NodeJs, a menos que tu proyecto no este creado con Angular CLI, puedes comprobarlo ejecutando el siguiente comando.-

1
$ node -v

Y obtendremos la versión de NodeJS, la versión puede variar.-

1
$ v8.11.1

En caso de no tener instalado NodeJS, puedes descargarlo de su pagina oficial, te recomiendo instalar la versión LTS.

Actualizar Angular CLI

Como primer paso debemos desinstalar las versiones anteriores de Angular CLI.-

1
2
$ npm remove -g angular-cli
$ npm remove -g @angular/cli

Si estas trabajando con sistemas GNU Linux recuerda dar privilegios de súper usuario con SUDO.

Antes de instalar nuevamente Angular CLI (en una versión más reciente) debemos limpiar la cache de npm.-

1
$ npm cache clean

Por ultimo instalamos la versión más reciente de Angular CLI.-

1
$ npm install -g @angular/cli@latest

Para comprobar la nueva versión, podemos ejecutar el siguiente comando.-

1
$ ng -v 

Nos saldrá algo parecido a lo siguiente.-

1
2
3
4
5
6
7
8
9
10
11
12
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.6.7
Node: 8.11.1
OS: linux x64
Angular: 
...

Crear un nuevo proyecto con Angular 5

Ahora que tenemos actualizado Angular CLI, vamos a crear un nuevo proyecto (donde se instalaran las librerías y paquetes necesarios para trabajar con Angular 5).-

1
$ ng ne project_name && cd project_name

Si queremos correr el nuevo proyecto, ejecutamos el servidor.-

1
$ ng serve

Además, puede comprobar en el archivo package.json la versión de Angular instalada.-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"dependencies": {
    "@angular/cli": "1.5.0",
    "@angular/common": "^5.2.9",
    "@angular/compiler": "^5.2.9",
    "@angular/compiler-cli": "^5.2.9",
    "@angular/core": "^5.2.9",
    "@angular/forms": "^5.2.9",
    "@angular/http": "^5.2.9",
    "@angular/language-service": "^5.0.0",
    "@angular/platform-browser": "^5.2.9",
    "@angular/platform-browser-dynamic": "^5.2.9",
    "@angular/platform-server": "^5.2.9",
    "@angular/router": "^5.2.9",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60"
}

Conclusiones

Si tienes problemas en cualquiera de los procesos anteriores, dejala en el área de comentarios y con gusto de ayudaremos a resolver el problema o duda.

Que tengan feliz código.


Te fue de utilidad el articulo, ayudanos a compartir para que a más personas les resulte util!

Te interesa el tema, recibe los nuevos articulos directamente en tu email.-