Cómo crear un Proyecto Angular

¿Qué es Angular? Todo programador Front-End ya conoce su significado, pero para los que no, seguid leyendo para conocer más sobre esta tecnología y aprender cómo crear un Proyecto Angular.

Angular es un framework opensource de desarrollo web y está pensado para facilitar la creación de páginas web SPA (Single Page Application). Gracias a esta tecnología se puede separar la parte Front de la parte Back fácilmente, evitar código repetitivo y crear desarrollos modulares, entre otras características.

El lenguaje principal de programación de Angular es TypeScript, el cuál es un lenguaje opensource creado por Microsoft. TypeScript es un superconjunto de JavaScript, pero con características adicionales.

Requisitos Angular

Para comenzar a trabajar en un proyecto Angular, necesitaremos previamente instalar lo siguiente:

  • NodeJS : Entorno que permite la ejecución de JavaScript.
  • NPM : Node Package Manager. Es un gestor de paquetes y viene incluído en versiones modernas de NodeJS.
  • Typescript: Paquete de lenguaje Typescript.
  • AngularCli: Paquete para crear proyectos Angular.
  • Visual Studio Code (Editor de código donde codificaremos la aplicación)

En los próximos apartados se ejecutarán una serie de comandos a través de la consola de Windows (aplicación Símbolo de Sistema de Windows).

Instalar NodeJS

Dirígete a la web oficial de NodeJS (https://nodejs.org/en/download/) y descarga la última versión compatible con tu sistema operativo.

Instala el software en una ubicación a tu elección.

Para comprobar la versión instalada, abre una consola de Windows y ejecuta:

node -v

Mi versión es la v14.17.4.

Instalar NPM

En una consola de Windows ejecuta el siguiente comando para ver la versión de NPM:

npm -v

Mi versión de NPM es la 6.0.0.

Instalar Typescript

Comprueba que tienes el paquete Tpescript instalado con el comando:

tsc -v

Si no lo tienes instalado, deberás ejecutar el siguiente comando:

npm install -g typescript

Un problema que me he encontrado a la hora de instalar typescript es el siguiente:

npm WARN npm npm does not support Node.js v14.17.4
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can't make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10.
npm WARN npm You can find the latest version at https://nodejs.org/
npm ERR! cb.apply is not a function

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\RoseM\AppData\Roaming\npm-cache\_logs\2021-08-11T14_49_11_733Z-debug.log

Para solucionarlo, me he dirigido al directorio C:\Users\RoseM\AppData\Roaming y he borrado los directorios npm y npm-cache.

Otra opción es limpiar cache a través de los siguientes comandos, pero no siempre me ha funcionado (como borrar directorios del tirón no hay nada):

npm cache verify

npm cache clean

Por último, he vuelto a instalar (npm install -g typescript) y comprobar la versión (tsc -v) y todo OK.

Mi versión de Typescript es:

4.3.5

Instalar AngularCli

Ejecuta el comando:

npm install -g @angular/cli

Cumprueba la versión con:

ng version

Mi versión es:

Angular CLI: 9.1.15

Crear proyecto Angular

Y por fin podremos crear el proyecto Angular. Para ello desde consola sitúate en el directorio donde quieras crearlo y ejecuta:

ng new nombreProyecto

Responde las preguntas:

Would you like to add Angular routing? No
Which stylesheet format would you like to use? CSS

Levantar servidor y ver tu proyecto:

Entra en el directorio de tu nuevo proyecto y ejecuta el comando:

ng serve –o

Se abrirá tu navegador predeterminado con tu aplicación:

Aplicación Angular
Aplicación Angular corriendo en navegador web

Instalar Visual Studio Code

Dirígete a la página oficial de Visual Studio Code (https://code.visualstudio.com/), descarga la última versión estable para tu sistema operativo e instala el programa.

Abre el programa y selecciona File –> Open Folder, elige el directorio del proyecto creado anteriormente y presiona Seleccionar carpeta.

A partir de aquí ya puedes empezar a desarrollar tu aplicación en Angular. Felicidades!!!

Comparte este post si te ha gustado!!

Comparte:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *