¿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 20.3.6. Suponiendo que ya tiene instalado Node.js, primero asegúrese que tenga la versión de Node.js compatible (^20.19.0 || ^22.12.0 || ^24.0.0), abra una terminal (del computador) y teclee el comando:

npm install -g @angular/cli

Para confirmar la instalación de Angular CLI de manera global use el siguiente comando en la terminal

ng --version

Esto debería mostrar la versión actual de Angular instalada.

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á (y puede ser en diferentes órdenes):

• Which stylesheet format would you like to use? En el cual seleccionamos CSS. Con las flechas del teclado se puede seleccionar el formato y presionamos enter.

• Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? Para esto escribimos ‘n' y presionamos enter.

• Do you want to create a ‘zoneless' application without zone.js? Escribimos ‘n' y presionamos enter.

• Which AI tools do you want to configure with Angular best practice? Seleccionamos None. Con las flechas del teclado seleccionamos None 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.8",

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.

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

NG-Estructura aplicación inicial