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:
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!!!
