Setup de un Proyecto Angular Moderno con Componentes Standalone y Angular CLI

Introducción

Angular ha evolucionado significativamente en los últimos años, y una de las novedades más relevantes es el modelo de componentes standalone. Este enfoque elimina la necesidad de módulos NgModule, simplificando la estructura de los proyectos y acelerando las tareas de desarrollo. Si estás empezando con Angular o querés modernizar un codebase existente, este tutorial te guiará paso a paso en la creación de un proyecto Angular actual con Angular CLI, TypeScript y componentes standalone.

Este artículo está orientado a desarrolladores que ya conocen JavaScript o TypeScript básico, pero que quizás no estén familiarizados con las herramientas más recientes de Angular. Al final, vos podés crear un proyecto Angular funcional, servirlo localmente y entender las mejores prácticas para mantenerlo escalable.

Por qué Angular moderno y componentes standalone

• Menos boilerplate: Sin NgModules, sin importaciones repetitivas.
• Árbol de dependencias más chico: Los proveedores se declaran solo donde son necesarios.
• Mejor soporte para lazy loading: Los routers pueden cargar componentes de forma asíncrona sin módulos adicionales.
• Compatibilidad total: Angular sigue soportando módulos tradicionales, pero el modelo standalone es el camino recomendado para nuevos proyectos.

Qué vas a aprender

1. Instalar Node.js, npm y Angular CLI.
2. Crear un nuevo proyecto Angular con Angular CLI en modo standalone.
3. Entender la estructura del proyecto generado.
4. Generar componentes standalone y rutas.
5. Configurar app.config.ts y bootstrapApplication.
6. Servir la aplicación con ng serve y revisar la salida esperada.
7. Ajustar la configuración de TypeScript para un tipado estricto.
8. Aplicar buenas prácticas y solucionar errores comunes.

Instalación de Node.js y npm

Antes de instalar Angular CLI, necesitás un entorno Node.js functional. La mayoría de los sistemas operativos ya lo incluyen, pero es recomendable tener una versión reciente.

Verificar versiones

node --version
npm --version

Salida esperada (ejemplo):

v18.17.0
9.6.7

Si vos tenés una versión antigua, podés actualizarla con:

# Utiliza nvm (Node Version Manager) para una gestión fácil
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
.source ~/.bashrc
nvm install 18.17.0
nvm use 18.17.0
node --version

Instalación de Angular CLI

Angular CLI es un wrapper que facilita muchas tareas: generar proyectos, componentes, pruebas, construcción, etc. Instalalo globalmente (una sola vez por máquina).

npm install -g @angular/cli

Verificá que la instalación haya sido exitosa:

ng version

Salida esperada (ejemplo):

 _                      _          _____     __
| |                    | |        / ____|   /_ |
| |     ___   __ _ _ __| |     ___| |     ___ | |
| |    / _ \/ _` | '__| |    / _ \| |    / _ \| |
| |___  __/ (_| | |  | |___| (_) | |___| (_) | |
|______\___|\__,_|_|  |_______\___/|_______\___/|_|  Angular CLI: 17.3.5

Creación de un nuevo proyecto Angular

Ahora vamos a crear un proyecto vacío en un directorio llamado my-angular-app. Usaremos banderas para desactivar el routing y selecccionar CSS como estilo, y también desactivamos el modo interactivo para que todo sea automático.

ng new my-angular-app --standalone --routing=false --style=css --interactive=false

Salida esperada (resumida)

? Would you like to add Angular routing? no
? Which stylesheet format? CSS
CREATE my-angular-app/angular.json (891 bytes)
CREATE my-angular-app/package.json (1054 bytes)
CREATE my-angular-app/README.md (1234 bytes)
... (muchos archivos)
INSTALL package dependencies...

Una vez completado, vos podés navegar al directorio del proyecto:

cd my-angular-app

Comprobación rápida del entorno

npm install

Este comando descarga las dependencias de node_modules necesarias para ejecutar la aplicación.

Explorando la estructura del proyecto

my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   ├── app.config.ts
│   │   └── app.routes.ts
│   ├── main.ts
│   └── styles.css
├── angular.json
├── tsconfig.json
├── tsconfig.app.json
├── package.json
└── ...

• angular.json: Archivo de configuración maestra para constructores, servidor de desarrollo, pruebas, etc.
• tsconfig.json: Configuración base de TypeScript; tsconfig.app.json extiende la base para la compilación de la aplicación.
• app.config.ts: Define los providers (provideRouter, provideZoneChangeDetection, etc.).
• app.routes.ts: Contiene las definiciones de rutas para el router.
• main.ts: Punto de entrada donde bootstrapApplication levanta la aplicación.

Creación del primer componente standalone

Angular CLI puede generar componentes standalone automáticamente. Utiliza la bandera --standalone (ya viene habilitada porque el proyecto fue creado con --standalone).

ng generate component hello-world --standalone

Salida esperada (resumida)

CREATE src/app/hello-world/hello-world.component.ts
CREATE src/app/hello-world/hello-world.component.html
CREATE src/app/hello-world/hello-world.component.css
CREATE src/app/hello-world/hello-world.component.spec.ts

Ahora vos tenés un nuevo componente en src/app/hello-world/. Inspectalo:

// hello-world.component.ts
csrc/app/hello-world/hello-world.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  standalone: true,
  imports: [],
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
  title = 'Hello, Angular!';
}

Uso del componente

Agregá el componente a las rutas. Edita app.routes.ts:

// src/app/app.routes.ts
import { Routes } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';

export const routes: Routes = [
  { path: 'hello', component: HelloWorldComponent },
  { path: '', redirectTo: '/hello', pathMatch: 'full' }
];

Ahora, vos podés referenciarlo en app.component.html:

<!-- src/app/app.component.html -->
<router-outlet></router-outlet>

Configuración del proveedor del router y arranque de la aplicación

Edita app.config.ts para definir los providers. Esta es la forma recomendada en proyectos standalone.

// src/app/app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes)
  ]
};

Finalmente, edita main.ts:

// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Configuración de TypeScript

El archivo tsconfig.json ya incluye un conjunto de opciones estrictas. Si querés estar aún más seguro, podés editar tsconfig.app.json (o la base) y activar strict si no está activo:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true
  }
}

Consejo: Angular CLI leerá automáticamente este archivo cuando compiles con ng build o ng serve. Ejecutá ng lint más tarde para que ESLint aplique reglas consistentes.

Construcción y ejecución de la aplicación

Ahora vos podés servir la aplicación localmente para ver los cambios en tiempo real.

ng serve --open

Salida típica

Alumno: dime qué hacer? (escribe "--help" para una lista de comandos disponibles)
STARTING DEVELOPMENT SERVER...
http://localhost:4200/
¡Página abierta automáticamente...

Si navegás a http://localhost:4200/hello, deberías ver el título “Hello, Angular!” mostrado por tu nuevo componente.

Buenas prácticas para proyectos standalone

1. Aislar proveedores: Coloca provideRouter, provideHttpClient, etc., en app.config.ts o en un archivo específico de función injector si querés un árbol de inyección más granular.
2. Usar lazy loading: Define rutas con loadComponent cuando una función pesada esté disponible como importación dinámica.
3. Mantener imports compacto: Solo importa lo que uses en cada componente; Angular CLI puede advertir sobre imports no utilizados.
4. Estandarizar estilos: Usa CSS global en styles.css y mantén CSS específico de componentes en sus archivos .component.css.
5. Versionar el package.json: Sigue las versiones de Angular, RxJS, etc., usando ng update para mantener dependencias actualizadas.
6. Linting y formateo: Configura eslint con @angular-eslint/recommended y prettier para mantener una base de código uniforme.
7. Compilación para producción: Ejecutá ng build --prod (o ng build --configuration production) para generar archivos optimizados.

Errores comunes y cómo evitarlos

Conclusión

Con estos pasos, vos acabas de configurar un proyecto Angular completamente funcional que aprovecha el nuevo modelo de componentes standalone. Recapitulando:

• Instalaste Node.js y Angular CLI.
• Generaste un nuevo proyecto con ng new usando las banderas adecuadas.
• Creaste un componente standalone con ng generate component.
• Configuraste app.config.ts y bootstrapApplication para iniciar la aplicación sin un NgModule.
• Serviste la aplicación con ng serve y confirmaste la salida esperada.
• Ajustaste la configuración de TypeScript para un tipado estricto.

Ahora puedes expandir el proyecto con más componentes, un pipeline de pipes personalizado, un servicio HTTP, lazy loading, entre otras características. El modelo standalone te dará una base limpia y mantenible a medida que crezca el application.

¡Feliz programación con Angular!