Instalación del framework Angular

Vamos a revisar en este post los pasos necesarios para realizar la instalación del framework Angular. Como ya sabréis, se trata de uno de los frameworks más extendidos hoy en día para el desarrollo de la parte frontend de las aplicaciones web. Mencionar que, debido a que es relativamente nuevo, todavía hay bastante evolución en el comportamiento de algunas de sus librerías, así que podemos encontrarnos con ciertas diferencias al migrar de una versión a otra superior. En cualquier caso, se trata de un pequeño precio a pagar por disfrutar de las ventajas ofrecidas por este software.

 

 

¿Qué es Angular? Angular es un framework (implementado en TypeScript) que nos permite agilizar el desarrollo de código tanto en JavaScript como en HTML. Sirve, por tanto, para llevar a cabo la construcción de aplicaciones web o de la parte frontend de aplicaciones cliente/servidor. Se trata de un software OpenSource, así que podemos hacer uso de todas sus características sin preocupaciones adicionales. En principio, el framework está pensado para la creación de aplicaciones web de una única página estática (SPA o Simple Page Application). Sin embargo, actualmente ya existen alternativas para la implementación de webs de varias páginas.

Hay que mencionar que el framework viene también con su interfaz de línea de comandos, denominada Angular CLI (Command Line Interface). Esta CLI es necesaria para realizar la creación de proyectos Angular, el testeo de las aplicaciones y el despliegue de las mismas, así como para ejecutar una amplia variedad de tareas adicionales. Por tanto, la instalación de Angular llevará consigo también la instalación de la línea de comandos asociada Angular CLI.

 

Instalación del framework Angular (versión 16)

 

Una vez comentado todo lo anterior, vamos a centrarnos ahora en los pasos necesarios para realizar la descarga y la instalación del framework en nuestra máquina. 

⛔ Como prerrequisito hay que tener en cuenta que, antes de iniciar la configuración de Angular, debemos tener instalado en nuestra máquina tanto el entorno "NodeJS" como el gestor "npm" (Node Package Manager, esto es, el gestor de paquetes por defecto de NodeJS). Esta necesidad viene derivada del hecho de que Angular CLI es una herramienta construida sobre NodeJS. Si no sabes cómo configurarte dicho entorno, comentarte que en el blog tienes un post para guiarte en dicha tarea.

Los pasos para la descarga de Angular serían los siguientes:

1º) En primer lugar, nos dirigimos a la página oficial de Angular. Como ya sabéis, siempre es recomendable trabajar con los sitios oficiales.

https://angular.io/

Su aspecto actual es el siguiente, aunque ya sabéis que las páginas van sufriendo modificaciones de un año a otro.

 

2º) Pulsando en el botón "TRY ANGULAR" accederemos a una página denominada "YOUR FIRST ANGULAR APP" en la que se explican los rudimentos necesarios para crear un proyecto Angular. Guardaos esta información, ya que os va a ser muy útil en el futuro.

https://angular.io/quick-start

3º) Para asegurarnos de que tenemos instalado NodeJS en nuestro equipo, nos vamos a un Shell y ejecutamos el comando:

node -v

Esto nos mostrará la versión que tenemos instalada. En mi caso, se trata de la versión 18.16.0.

También podemos verificar la versión que tenemos instalada del paquete "npm". Para ello, ejecutamos el siguiente comando (en mi caso, se trata de la versión 9.6.6):

npm -version

4º) A continuación, para instalar Angular CLI tendremos que ejecutar el comando siguiente, que descargará la última versión disponible.

npm install -g @angular/cli

5º) Al terminar la instalación, normalmente veremos que la ejecución muestra varios warnings (WARN), así que siempre es conveniente confirmar que todo ha acabado correctamente. 

Para ello, en primer lugar ejecutamos el comando:

ng v

Ahí nos debería aparecer información acerca de la versión de Angular CLI que se acaba de instalar en nuestro equipo. En mi caso, se trata de la versión 16.0.0.

6º) Adicionalmente, también podemos chequear los paquetes que tenemos instalados en nuestro gestor npm. Para ello, ejecutamos el comando:

npm list -g

Nos aparecerá la lista de paquetes instalados. Si todo ha ido bien, en dicha lista se debería mostrar el paquete "@angular/cli".

 

Otra forma de verlo sería buscar directamente ese paquete con el comando:

npm list -g @angular/cli

El resultado sería el siguiente:

Como se aprecia en el ejemplo, tenemos instalado el paquete "@angular/cli@16.0.0" en la siguiente ruta del equipo:

C:\Users\alcau\AppData\Roaming\npm

7º) A continuación, procedemos a añadir la ruta de nuestra instalación Angular CLI en la lista de directorios de la variable PATH del sistema.

En mi ejemplo sería la siguiente ruta:

PATH --->  C:\Users\alcau\AppData\Roaming\npm

En principio, siguiendo los pasos anteriormente descritos, Angular ya debería quedar perfectamente configurado en nuestro equipo. En cualquier caso, comprobad con los comandos indicados si os aparecen los datos del paquete instalado. A partir de aquí ya no deberíamos tener problemas para inicializar nuestro primer proyecto en Angular. Si no sabéis cómo hacer esto último, os comento que revisaremos la operativa correspondiente en un futuro post. Por ahora quedaos con la idea de que, en este punto, en vuestro sistema debéis tener instalados tanto NodeJS (y npm) como Angular (y Angular CLI).

Pues nada, eso era todo lo que había que explicar con respecto a la instalación de Angular. Espero que los pasos indicados os hayan servido de guía para completar correctamente el proceso. En cualquier caso, podéis comentarme aquí abajo cualquier problema que os haya ido surgiendo a lo largo del post.

Saludos.