Tutorial crear una aplicación vacía en Angular

Objetivos de aprendizaje

Al finalizar este taller, cada estudiante debe ser capaz de:

Crear una nueva aplicación en Angular sin módulos, solo con componentes standalone.

Preparación

Se requiere instalar Angular.

Instalar Angular

Para este tutorial, vamos a instalar la última versión de Angular: para la fecha de elaboración de este tutorial es Angular CLI versión 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.

Crear la aplicación

Defina primero dónde, en su máquina, va a alojar su aplicación.

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

ng new "nombre de su módulo funcional en minúsculas" --style=css --routing=false --ssr=false

Al ejecutar el comando, sin algunas de las opciones, 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.

Abrir VSCode

Desde la terminal ingrese a la nueva carpeta “nombre su módulo” y luego ejecute:

code .

Esto abrirá VSCode en la carpeta del proyecto

Instalar Bootstrap en el 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" ],

Crear los ambientes de trabajo y ejecución

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.

Ejecutar la Aplicació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/

Borrar el contenido por defecto

Borre el contenido por defecto que aparece en su aplicación y agregue un título con el nombre de su módulo. Verifique y haga un commit/push de su proyecto al repo.