¿Qué aprenderá?

Al finalizar este tutorial el estudiante estará en capacidad de crear una nueva aplicación en Angular.

¿Qué obtendrá?

Una nueva aplicación Angular con la estructura básica de archivos.

¿Qué necesita?

1. Manejo básico de git.
2. Manejo de consola de comandos.

Para este tutorial, vamos a instalar la última versión de Angular: para la fecha de elaboración de este tutorial es Angular CLI versioned 19.1.4. Suponiendo que ya tiene instalado Node.js, primero asegúrese que tenga la versión de Node.js compatible (18.19.1 || 20.11.1 || 22.0.0), abra una terminal (del computador) y teclee el comando:

npm install -g @angular/cli

Defina primero dónde va a alojar su aplicación. Para nuestro caso se ha definido la carpeta D:\wsAngular

Desde la consola de comandos, vaya al folder que acaba de crear (cd y la ruta del folder) y luego teclee:

ng new --no-standalone mynewapp

La opción --no-standalone del comando indica que quiere crear una aplicación basada en módulos y no en componentes individuales. Angular busca con los standalone components simplificar las estructuras de las aplicaciones para reducir el código repetivo; sin embargo, en el curso usaremos los módulos para una mejor organización del proyecto.

Al ejecutar el comando, Angular-cli le preguntará:

• Which stylesheet format would you like to use? En el cual seleccionamos CSS. Con las flechas del teclado se puede seleccionar el formato.
• Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? Para esto escribimos ‘n' y presionamos enter.

En algunas versiones de Angular-cli puede preguntar si quiere activar el modo estricto. En este caso, indique no escribiendo la letra N.

El proceso toma un momento mientras se crean los archivos y se instalan las dependencias.

Desde la terminal ingrese a la nueva carpeta mynewapp y luego ejecute:

code .

Esto abrirá VSCode en la carpeta del proyecto

Abra una nueva terminal desde la terminal de VSCode y ejecute:

npm install --save bootstrap

Después de que este proceso termine, se habrá:

• Instalado Bootstrap dentro de la carpeta node_modules de su proyecto.
• Modificado el archivo package.json para incluir la nueva dependencia "bootstrap", que para la fecha de creación de este tutorial es "^5.3.2",

Agregue los estilos Bootstrap en el archivo angular.json. De este modo, el atributo styles, debe quedar:

"styles": [
   "node_modules/bootstrap/dist/css/bootstrap.min.css",
   "src/styles.css"
],

Abra una nueva terminal desde la terminal de VSCode, asegúrese que esté dentro de la carpeta cd y la ruta del folder) y ejecute:

ng generate environments

Se creará una carpeta con el nombre environments como se ve a continuación.

En una consola vaya a la carpeta raíz de su nuevo proyecto y teclee:

ng serve

Al final verá un mensaje:

Application bundle generation complete. [15.016 seconds]
Watch mode enabled. Watching for file changes...

➜ Local: http://localhost:4200/

➜ press h + enter to show help

Vaya al navegador y teclee http://localhost:4200/

Debe ver, entre otras cosas, lo que se detalla en la Figura 1.

Hay varias extensiones de Angular para VSCode. Al menos debemos tener las siguientes:

• Angular Essentials (by John Papa)
• Angular Files (by Alexander Ivanichev)

Para esto vaya al Marketplace y busque Angular Essentials (ver Figura 2) y Angular Files (ver Figura 3).

En el siguiente video revisamos la estructura de la aplicación tal como la creó Angular-cli:

NG-Estructura aplicación inicial

En esta parte, nos vamos a enfocar en actualizar la versión de Angular por si no se encuentra con la versión Angular CLI versioned 19.1.4.

Suponiendo que ya tiene instalado Node.js, revise la siguiente tabla y asegúrese de tener una versión compatible con la última versión de Angular. De lo contrario, instalelo con el siguiente link:

Ahora, abra una nueva terminal e ingrese a la nueva carpeta mynewapp(cd mynewapp) y revise que versión tiene, ejecute el comando

ng version

Revise el siguiente enlace para verificar cómo actualizar su versión de Angular dependiendo de la que tiene actualmente

https://angular.dev/update-guide?v=18.0-19.0&l=1

En este caso vamos a hacer un ejemplo con la versión 17. Primero debemos actualizar a la versión 18 con el siguiente comando:

ng update @angular/core@18 @angular/cli@18

Y damos Enter para continuar.

Luego debemos actualizar de la versión 18 a la 19 de la siguiente forma:

ng update @angular/core@19 @angular/cli@19

Debemos hacer Stash changes para poder actualizar a la última versión.

Y damos doble Enter para finalizar.

Para revisar que sí se haya actualizado a la versión de Angular deseada ejecutamos el siguiente comando ng version y debe aparecer la siguiente pantalla: