Inicio / Artículos / De una carpeta vacía a una aplicación en ejecución: configuración de un proyecto moderno con Angular 22

AngularAngular CLITypeScriptNode.jsFrontend

De una carpeta vacía a una aplicación en ejecución: configuración de un proyecto moderno con Angular 22

Instale Node.js y la Angular CLI, cree una aplicación de Angular 22 con ng new, comprenda la estructura de los archivos standalone y ejecútela localmente con actualizaciones en tiempo real.

2189 palabras

Antes de poder aprender sobre componentes, plantillas, servicios o enrutamiento en Angular, necesitas un proyecto que realmente funcione en tu máquina. Para lograrlo se requieren algunas herramientas, una orden de scaffolding y una estructura de carpetas que difiere bastante de la que muestran muchos tutoriales antiguos. Esta guía te llevará desde una máquina limpia hasta una aplicación Angular 22 en funcionamiento, explicará qué hace cada herramienta y mostrará cómo se conectan las partes generadas para que el resto del framework tenga un lugar donde instalarse.

Lo que necesitas antes de comenzar

Una configuración local de Angular se basa en cuatro elementos: Node.js, la Angular CLI, un editor de código (Visual Studio Code es una opción común) y una terminal. No hay necesidad de instalar TypeScript por separado; al crear un proyecto, Angular, TypeScript y todos los demás paquetes necesarios se instalan automáticamente.

La compatibilidad de versiones es importante. En el momento de redactar este texto, la lista de referencias de compatibilidad de Angular indica que Node.js v22.22.3 o una versión más reciente es el mínimo requerido para Angular 22, además de las versiones más recientes que también son compatibles. Estos rangos varían entre las diferentes versiones de Angular, por lo que consulte la tabla de compatibilidad actual en angular.dev antes de instalar cualquier cosa.

Paso 1: instalar Node.js y npm

Angular crea aplicaciones para el navegador, así que es lógico preguntarse por qué se necesita un entorno de ejecución del lado del servidor. La respuesta está en las herramientas. Node.js permite que JavaScript se ejecute fuera del navegador, y la Angular CLI, el compilador, el servidor de desarrollo y las herramientas de prueba son todos programas en JavaScript que lo necesitan. Node.js también incluye npm, el gestor de paquetes que Angular utiliza para instalar las dependencias de su proyecto.

Descargue un instalador desde el sitio web oficial de Node.js. Una vez terminado, abra una terminal (o Símbolo del sistema en Windows) y confirme que el entorno de ejecución esté en su ruta:

node --version

El resultado debería ser una cadena de versión similar a esta:

v22.22.3

Luego, confirme que npm también esté disponible:

npm --version

Si ambos comandos muestran un número de versión, la base está lista. Resista la tentación de mantener la versión antigua de Node.js que esté instalada solo porque un tutorial anterior funcionaba con ella. Cada versión principal de Angular tiene su propio rango de Node.js soportado, y una incompatibilidad suele manifestarse como errores confusos de instalación o compilación en lugar de un mensaje claro. Herramientas como nvm o fnm facilitan cambiar las versiones de Node.js por proyecto si necesita varias.

Paso 2: entender qué hace Angular CLI

La siguiente herramienta es la Angular CLI (Interfaz de Línea de Comandos). Es la forma principal de crear y gestionar aplicaciones Angular: crea estructuras para nuevos proyectos, genera componentes y servicios, ejecuta el servidor de desarrollo, produce versiones listas para producción, ejecuta pruebas y se encarga de muchas otras tareas rutinarias. En lugar de escribir a mano docenas de archivos y configurar la compilación por tu cuenta, permites que la CLI genere un punto de partida funcional y convencional del cual luego puedes seguir desarrollando.

Paso 3: instalar la Angular CLI de forma global

Instala la CLI con npm:

npm install -g @angular/cli@22

Cada parte de la orden tiene una función específica. npm install instala un paquete. La bandera -g lo instala de forma global, lo que permite utilizar la orden desde cualquier carpeta y no solo dentro de un proyecto. El sufijo @22 fija la instalación en la versión principal Angular 22, de modo que se obtiene una CLI acorde a la versión del framework que se pretende utilizar.

Una vez completada la instalación, verifíquela:

ng version

Esto muestra detalles sobre la CLI instalada y los paquetes relacionados. Tenga en cuenta que la orden no es angular sino ng, el ejecutable que el paquete de CLI coloca en su ruta de acceso. Tendrá que escribirla constantemente:

ng

Nota práctica: una vez que existe un proyecto, su package.json también contiene una copia local de la CLI, y ejecutar ng dentro de la carpeta del proyecto utiliza esa versión local. La instalación global existe principalmente para que pueda ejecutar ng new antes de que exista ningún proyecto.

Paso 4: cree el esqueleto de su primera aplicación

Vaya a la carpeta donde guarda sus proyectos, por ejemplo:

cd Desktop

Luego pida a la CLI que cree una nueva aplicación:

ng new my-first-angular-app

El argumento final, my-first-angular-app, se convierte en el nombre del proyecto y de la carpeta; cualquier nombre válido funciona. ng new es interactivo, por lo que puede hacer algunas preguntas sobre cómo configurar el proyecto, como qué formato de hoja de estilo utilizar. Los mensajes exactos cambian a medida que Angular evoluciona, así que no se sorprenda si los suyos difieren de una captura de pantalla o de una guía antigua.

Para un primer proyecto, aceptar los valores predeterminados recomendados es una opción sensata. Los valores predeterminados actuales generan una aplicación basada en la API independiente y utilizan la convención de nomenclatura de archivos más corta y moderna que verá en breve. Cuando finalice la orden, existirá una nueva carpeta:

my-first-angular-app/

Entra en ella:

cd my-first-angular-app

Paso 5: orientarse en los archivos generados

Abra la carpeta en su editor. Un proyecto recién generado se ve más o menos así:

my-first-angular-app/
│
├── .vscode/
│
├── node_modules/
│
├── public/
│
├── src/
│   ├── app/
│   │   ├── app.ts
│   │   ├── app.html
│   │   ├── app.css
│   │   └── app.spec.ts
│   │
│   ├── index.html
│   ├── main.ts
│   └── styles.css
│
├── angular.json
├── package.json
├── tsconfig.json
└── README.md

Una breve introducción a las entradas más importantes:

  • src/main.ts es el punto de entrada que inicia la aplicación.
  • src/index.html es la única página HTML que carga el navegador; Angular la renderiza en ella.
  • src/styles.css contiene los estilos globales que se aplican en toda la aplicación.
  • src/app/ contiene el componente raíz, dividido en app.ts (la clase de TypeScript), app.html (su plantilla), app.css (estilos específicos para ese componente) y app.spec.ts (su prueba unitaria).
  • public/ alberga los recursos estáticos que se sirven tal como están.
  • angular.json configura cómo la CLI construye, sirve y prueba el proyecto.
  • package.json enumera las dependencias y los scripts de npm; node_modules/ es donde npm las instaló.
  • tsconfig.json configura el compilador de TypeScript.

    • No es necesario que entienda cada archivo por ahora. Saber dónde se encuentran el punto de entrada, el componente raíz y la configuración es suficiente para comenzar.

    Paso 6: ejecutar el servidor de desarrollo

    Dentro de la carpeta del proyecto, inicie la aplicación:

    ng serve

    La CLI compila la aplicación y inicia un servidor de desarrollo local. También monitorea los archivos fuente y vuelve a compilarlos cada vez que se modifica alguno. Cuando finalice la compilación, verá una salida similar a:

    Application bundle generation complete.
Local: http://localhost:4200/

    Abra esa dirección en su navegador:

    http://localhost:4200

    Debería aparecer la página de inicio predeterminada. Si prefiere no escribir la URL cada vez, agregue la bandera --open y la CLI iniciará su navegador predeterminado por usted:

    ng serve --open

    Si el puerto 4200 ya está en uso por otro proceso, puede elegir uno diferente con la opción --port.

    Paso 7: realice un cambio y observe cómo se vuelve a compilar

    Para demostrar que todo el ciclo funciona, edite la plantilla del componente raíz:

    src/app/app.html

    Sustituya todo en ese archivo por un breve fragmento de marcado:

    <h1>Hello Angular 22!</h1>
<p>
  My first Angular application is running successfully.
</p>

    Guarde los cambios y luego vuelva al navegador. La página se actualiza por sí sola. Dado que el servidor de desarrollo vigila sus archivos y los vuelve a compilar ante cualquier cambio, las ediciones normales del código fuente nunca requieren detener y reiniciar ng serve. Los cambios en los archivos de configuración como angular.json son la excepción y, por lo general, necesitan un reinicio.

    Mostrando valores desde la clase del componente

    El marcado estático es solo la mitad de la historia. A continuación, amplíe la plantilla para que también muestre valores provenientes del componente. Los dobles llaves son marcadores de posición que Angular rellena con los datos de la clase:

    <div class="container">
<h1>{{ title }}</h1>
  <p>{{ message }}</p>
  <h1>Hello Angular 22!</h1>
  <p>
    My first Angular application is running successfully.
  </p>
</div>

    Para que esos marcadores de posición se resuelvan, la clase del componente en app.ts necesita propiedades correspondientes. El decorador @Component le indica a Angular que esta clase es un componente, en qué etiqueta se renderizará (app-root, el elemento ya presente en index.html), y dónde se encuentran su plantilla y sus estilos:

    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  title = 'My First Angular 22 App';
  message = 'Angular project is running successfully!';
}

    Una vez guardados ambos archivos, la página muestra el título y el mensaje de la clase por encima del contenido estático. Dependiendo de la versión exacta de la CLI, el archivo app.ts generado puede verse ligeramente diferente (los templates más recientes a veces utilizan señales para el título), pero una propiedad de clase sencilla como esta funciona de la misma manera con fines educativos. Si desea experimentar antes de instalar anything, existe una versión de este ejemplo en StackBlitz que se ejecuta completamente en el navegador.

    Cómo se conectan las partes al iniciar

    Con una aplicación en ejecución, es útil ver la ruta desde el navegador hasta su template:

    Browser
                   │
                   ▼
              index.html
                   │
                   ▼
                main.ts
                   │
                   ▼
              App Component
                   │
          ┌────────┴────────┐
          ▼                 ▼
       app.html          app.css
       (HTML)             (CSS)

    El navegador carga index.html. Los scripts empaquetados ejecutan main.ts, el punto de entrada de la aplicación, que inicia al componente raíz. Ese componente combina su clase con su plantilla HTML y sus estilos, la renderiza en el elemento app-root, y a partir de ahí Angular mantiene la interfaz de usuario sincronizada a medida que cambian los datos del componente. Esta descripción está deliberadamente simplificada, pero le proporciona un mapa mental al que poder asociar temas posteriores.

    Un ejemplo mínimo de enlace de datos

    Aquí está la versión más pequeña y útil de esa idea. La clase del componente define una única propiedad:

    import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  title = 'My First Angular App';
}

    Y la plantilla hace referencia a ella:

    <h1>{{ title }}</h1>
<p>
  Welcome to my Angular 22 journey!
</p>

    Dos líneas contienen todo el concepto. En la clase de TypeScript hay una asignación de propiedad:

    title = 'My First Angular App';

    Y en la plantilla hay una expresión de interpolación:

    {{ title }}

    Angular lee el valor de la clase e lo inserta en el HTML renderizado. Esto es interpolación, la forma más simple de vinculación de datos de Angular. Si posteriormente cambias title en respuesta a la entrada del usuario o a datos provenientes de un servidor, Angular actualiza la página por ti. La vinculación de propiedades, la vinculación de eventos y la vinculación bidireccional se basan en el mismo principio y merecen un análisis más detallado.

    Por qué los tutoriales antiguos se ven diferentes

    Si buscas tutoriales sobre Angular, encontrarás rápidamente proyectos con un diseño distinto. Una guía antigua suele mostrar archivos como estos:

    app.component.ts
app.component.html
app.component.css
app.module.ts

    mientras que un proyecto generado con la CLI actual contiene:

    app.ts
app.html
app.css

    y con frecuencia ni siquiera existe un app.module.ts. El framework ha cambiado significativamente a lo largo de los años. Angular moderno utiliza APIs independientes por defecto: los componentes declaran directamente sus propias dependencias, por lo que las nuevas aplicaciones rara vez necesitan un NgModule para agruparlas. La CLI actual genera aplicaciones independientes y sigue, de forma predeterminada, las convenciones de nomenclatura más recientes y simplificadas.

    Esto no hace que el código más antiguo esté mal. Muchas aplicaciones en producción siguen utilizando módulos y nombres más largos de tipo .component.ts, y ambos estilos son compatibles. Pero cuando se está aprendiendo, mezclar estos dos enfoques es una fuente común de confusión. Si un tutorial te indica que edites app.module.ts y tu proyecto no cuenta con uno, estás viendo el estilo antiguo; en ese caso debes buscar un equivalente independiente en lugar de crear el archivo manualmente.

    Conclusión

    Angular CLI convierte la configuración del proyecto en un proceso breve y repetible. Una vez que lo hayas realizado una vez, todo el flujo se ve así:

    • Instala una versión de Node.js que sea compatible con la versión principal de Angular, y verifica que node y npm estén funcionando.
    • Instala la CLI con npm install -g @angular/cli@22 y confírmala con ng version.
  • Crea una estructura básica para un proyecto con ng new, aceptando los valores predeterminados para una primera aplicación.
  • Familiarízate con main.ts, index.html, los archivos app.*, angular.json y package.json.
  • Ejecuta ng serve (opcionalmente con --open) y confía en las reconstrucciones automáticas mientras editas.
  • Considera los tutoriales basados en NgModule y de estilo .component.ts como un enfoque más antiguo, y tradúcelos a APIs independientes.

    • No es necesario que entiendas cada archivo generado desde el primer día. Lo importante es tener un proyecto funcional de Angular 22 y saber dónde se encuentran sus componentes principales, lo cual constituye la base para aprender en profundidad sobre componentes, plantillas y enlace de datos.

    Lecturas relacionadas

    Todos los artículosEnviar el brief