Cómo instalar Angular 8 (Windows/Mac)

Con esta guía podrás aprender paso a paso cómo preparar el entorno necesario para instalar Angular 8 y así poder comenzar un nuevo proyecto con la última versión de este framework.

Pasos para instalar Angular 8

Antes de poder usar Angular necesitamos instalar lo siguiente:

  • Un IDE para editar código. Recomendamos Visual Studio Code ,pero podéis usar cualquiera que os guste, también está muy bien Sublime Text por ejemplo.
  • Git, para el control de versiones de nuestro código.
  • Node y npm, para poder instalar Angular.
  • CLI Angular 8, será lo último a instalar.

Cómo Instalar Visual Studio Code

Para descargar Visual Studio Code lo haremos desde la web https://code.visualstudio.com/. La instalación es sencilla, tal y como instalaríamos cualquier programa de Windows o Mac.

Cómo Instalar Git

Para instalar Git tenemos que hacer la descarga desde la web https://git-scm.com/downloads

De nuevo la instalación es sencilla tal y como instalaríamos cualquier programa de Windows o Mac, haremos la instalación sin modificar casi ninguna opción de las que están marcadas por defecto.

Lo primero que tenemos que hacer es aceptar las condiciones de la licencia. Después elegir el directorio de instalación y seleccionar los componentes marcados por defecto para instalar, verificando que esté marcada la opción «Git Bash here».

Después seguiremos avanzando en las siguiente pantallas (Next) hasta que comience la instalación de Git.

Mientras instalamos, vamos a crear una carpeta llamada Practica donde vamos a construir un proyecto de prueba.

Una vez que termine la instalación de Git, pulsaremos con el botón derecho del ratón sobre la carpeta Practica que hemos creado y nos aparecerán un par de opciones nuevas para abrirla.

Elegimos la opción «Git Bash Here» y comprobaremos que se abre la consola y reconoce los comandos de Git, con esto sabremos que Git se ha instalado correctamente.

Cómo Instalar Node

Para descargar Node accederemos a la web nodejs.org/es, donde nos aparecerá la opcion de descargar dependiendo del sistema operativo que estemos usando.

Cuando termine de descargarse, ejecutaremos el instalador y seguiremos el proceso de instalación con las opciones marcadas por defecto.

Cuando termine la instalación de Node, nos iremos con el botón derecho sobre nuestra carpeta Practica y seleccionaremos la opción «Open with Code»

Cuando hagamos esto se abrirá nuestra carpeta en Visual Studio Code. Cuando lo tengamos abierto haremos click con el botón derecho en la zona izquierda y abriremos el terminal.

Una vez se ha abierto la terminal, comprobamos si Node se ha instalado de forma correcta, de forma que escribiendo

en el terminal nos debe de aparecer la versión instalada. Nos aparecerá un mensaje de error en caso contrario.

Instalación de Angular 8

PAra la instalación de Angular vamos a usar el mismo terminal que hemos usado antes, en el que ejecutaremos el comando

De esta manera instalamos la última versión estable de Angular que exista de forma global independientemente de la carpeta donde estemos.

Cuando termine el proceso de instalación de nuevo verificamos que ha sido correcta con el comando

NOTA: Si este comando falla en la ejecución del script PowerShell indicándonos que el archivo no está firmado digitalmente necesitaremos ir abrir PowerShell en modo administrador y utilizar el siguiente comando:

Hola mundo con Angular 8

Después de instalar todo lo necesario para comenzar con Angular 8 usamos la carpeta Practica que hemos creado antes.

Nos vamos a terminal y escribimos lo siguiente para crear un nuevo proyecto:

Durante la instalación el asistente del CLI de Angular irá realizando una serie de preguntas para ofrecernos varias opciones. Lo primero que nos va a preguntar es si queremos autogenerar las rutas, a lo que responderemos afirmativamente. Después nos va a preguntar qué opción queremos elegir para el CSS y aquí vamos a elegir SCSS.

Después comenzará el proceso de creación de nuestro proyecto, que llevará unos minutos hasta que se termine. Una vez finalizado lo lanzaremos ejecutando en la consola el siguiente comando:

Lo haremos siempre desde la carpeta de nuestro proyecto, es decir si nuestro proyecto se llama angular8, tendremos que entrar antes en la carpeta escribiendo el terminal lo siguiente:

Después de esperar unos segundos tendremos el proyecto ejecutándose y se abrirá el navegador automáticamente con el puerto correspondiente, esto se debe a que hemos utilizado la opción -o en la ejecución.

http://localhost:4200/

Y ya podemos navegar por Visual Studio Code para editar esta Web base que se ha creado automáticamente

Espero que os sea de utilidad, un saludo y feliz cuarentena.

También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

WP Twitter Auto Publish Powered By : XYZScripts.com