Instalando Angular 6

En este artículo vamos a comenzar instalando en nuestro ordenador el CLI de Angular 6. Puede que tengas instalado alguno anterior (Angular 4 ó 5), o que sea tu primer asomo a Angular.

En cualquier caso, que sepas que la mayoría de las cosas que puedas conocer de estas dos versiones anteriores te funcionarán sin cambios, o con algunos cambios mínimos, en Angular 6. Sin embargo, la nueva versión del framework ofrece mayor compatibilidad con las últimas novedades, y es, en todo caso, un producto maduro, estable, robusto y fiable para nuestros desarrollos.

INSTALAR ANGULAR 6

Lo primero que vamos a hacer, si tienes instalado el CLI de Angular 4 ó 5 es desinstalarlo. Si no estás seguro de si está instalado de si lo tienes o no, teclea, en tu terminal de mandatos, lo siguiente:

ng -v

En caso de que no lo tengas instalado, obtendrás un mensaje de error:

bash: /c/Users/Usuario/AppData/Roaming/npm/ng: No such file or directory

Si tienes alguna versión anterior (por ejemplo, la 5), obtendrás un mensaje parecido al siguiente:

Angular CLI: 1.7.4
Node: 8.9.1
OS: win32 x64
Angular:
...

En ese caso, desinstálalo con:

npm uninstall -g @angular/cli

Al cabo de unos segundos, tu consola responderá:

removed 929 packages in 32.317s

Ahora instálalo de nuevo. El gestor de paquetes NPM cogerá, por defecto, la versión más actualizada del CLI.

npm install -g @angular/cli

Tras unos segundos, obtendrás la siguiente respuesta (o muy parecida):

C:\Users\Usuario\AppData\Roaming\npm\ng -> C:\Users\Usuario\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng

> @angular/cli@6.0.8 postinstall C:\Users\Usuario\AppData\Roaming\npm\node_modules\@angular\cli
> node ./bin/ng-update-message.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\@angular\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @angular/cli@6.0.8
added 246 packages from 189 contributors in 31.425s

Ahora, comprueba la versión instalada, igual que antes:

ng -v

La respuesta de tu consola se parecerá a la siguiente:

Angular CLI: 6.0.8
Node: 8.9.1
OS: win32 x64
Angular:
...

Package Version
------------------------------------------------------
@angular-devkit/architect 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.2
typescript 2.7.2

La primera línea de texto es la que nos dice que tenemos instalado Angular 6.

Si, en algún momento, para algún desarrollo específico, necesitaras tener Angular 5, deberás desinstalar el CLI y teclear la siguiente línea:

npm install -g @angular/cli@1.7.4

Los números después de la segunda arroba indican la versión del CLI que deseas instalar. El CLI versión 1.7.4 corresponde a Angular 5.

ATENCIÓN. Para poder instalar el CLI de Angular necesitas el Node Package Manager. Si no lo tienes instalado, en este artículo te contamos como hacerlo.

CAMBIOS DE ANGULAR 5 A ANGULAR 6

La mayor parte de tus trabajos en Angular 5 funcionarán, con unos cambios mínimos, en Angular 6. Sin embargo, los fabricantes de Angular nos ofrecen una interesante herramienta online para ayudarnos a migrar nuestros proyectos. La tienes disponible en https://update.angular.io/.

A continuación, vamos a crear un proyecto base, para que veas algunos detalles que debes conocer.

PROYECTO BASE EN ANGULAR 6

Iniciamos un nuevo proyecto como siempre:

ng new ang6-base -p a6b --routing true

ATENCIÓN. Cuando, en el nombre del proyecto, empleamos guiones medios (-), el CLI entiende que el nombre está, semánticamente, formado por «partes». Así, en el ejemplo que ves en el mandato de arriba, el nombre tiene dos partes: ang6 y base que, unidas, dan el nombre del proyecto: ang6-base. Estas «partes» pueden contener números, como ves, pero no pueden empezar con un número. Así, un nombre como ang-6base daría un error y no crearía el proyecto.

Tras unos minutos (dependiendo de la velocidad de tu equipo y de tu conexión a Internet), se habrá creado el directorio con el proyecto. Ábrelo con el VSC y observa su estructura. Verás que es prácticamente idéntica a la de un proyecto Angular 5. Lo primero que nos llama la atención es que, en la lista de ficheros, el fichero de datos .angular-cli.json ha cambiado de nombre. Ahora se llama angular.json. Tiene el mismo objetivo y actúa igual, pero con otro nombre.

Abrimos el fichero package.json. Como ya es habitual, modificamos la línea:

"start": "ng serve",

dejándola como:

"start": "ng serve --aot -o",

En la terminal de mandatos de VSC tecleamos npm start y, al cabo de unos instantes, vemos que se nos abre el navegador con el proyecto por defecto de Angular.

Ahora podemos interrumpir la ejecución del servidor e instalar jQuery y bootstrap:

npm install jquery
npm install bootstrap

Cuando se instalan librerías externas, como en este caso (y, a la postre, como casi siempre), es posible que el CLI nos avise de posibles vulnerabilidades:

found 13 vulnerabilities (9 low, 4 high)

Ejecutaremos un comando que protegerá a nuestro proyecto Angular de las mismas:

npm audit fix

Aún así, es posible que la respuesta, tras unos segundos, sea la siguiente:

added 2 packages from 1 contributor and updated 1 package in 47.997s
fixed 1 of 13 vulnerabilities in 21757 scanned packages
1 package update for 12 vulns involved breaking changes
(use npm audit fix --force to install breaking changes; or do it by hand)

En ese caso, siguiendo el consejo del CLI, ejecutaremos:

npm audit fix --force

El archivo angular.json es el que sustituye, en esta versión, a .angular-cli.json de la versión 5. También aquí tenemos que referenciar las librerías externas que usaremos, así como el archivo general de estilos de la aplicación (este último ya está referenciado desde la creación del proyecto). Sin embargo, aquí cambian ligeramente las rutas. En la versión 5, las referencias eran así:

Ahora, en la versión 6 son así:

Como ves, un simple cambio de rutas. Si ahora arrancas de nuevo la aplicación, ya se aprecia, en la tipografía, la presencia de bootstrap.

CONCLUYENDO

Con esto tenemos Angular 6 instalado, listo para empezar nuestra aplicación. En este enlace tienes este proyecto inicial en su estado actual.

   

Deja un comentario