Cómo estructuro mis proyectos Angular con módulos standalone

Con la llegada de Angular 15+ y la madurez en Angular 18, los módulos standalone cambiaron la forma en que estructuramos aplicaciones. Este artículo explica cómo organizo mis proyectos actuales para maximizar escalabilidad, mantenibilidad y productividad usando esta nueva forma de trabajar.

Introducción

Antes, Angular obligaba a crear un NgModule por cada funcionalidad. Aunque eso tenía sus ventajas, la estructura podía volverse compleja y repetitiva. Ahora, con los componentes standalone, podemos crear aplicaciones más ligeras y modulares sin perder la claridad.

Estructura base

Mi estructura habitual es:

src/
├── app/
│   ├── core/            # Servicios globales, interceptores, guards
│   ├── shared/          # Componentes y pipes reutilizables (standalone)
│   ├── pages/           # Vistas de alto nivel, agrupadas por rutas
│   ├── components/      # Componentes standalone específicos de cada página
│   ├── routes/          # Definición de rutas organizadas
│   └── app.config.ts    # Providers y configuración global standalone

Uso de componentes standalone

Los componentes standalone permiten importar directamente lo necesario:

@Component({
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './form.component.html',
})
export class FormComponent { ... }

Esto reduce la necesidad de NgModules, mejora la claridad y evita importar cosas innecesarias.

Organización de rutas

En routes/app.routes.ts uso rutas definidas por zonas:

export const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('../pages/home/home.page').then(m => m.HomePage),
  },
  {
    path: 'login',
    loadComponent: () => import('../pages/login/login.page').then(m => m.LoginPage),
  },
];

Cada ruta carga un componente standalone con sus propios imports.

Módulo core y shared

• core/: Contiene servicios, interceptores, guards y lógica global. No debería tener componentes.
• shared/: Pipes y componentes reutilizables que se usan en varias partes del proyecto.

Ambos son claves para evitar duplicación y mantener consistencia.

Conclusión

Pasar a una estructura basada en componentes standalone me ha permitido trabajar más rápido, mantener el código más limpio y facilitar el testing. Si estás comenzando un nuevo proyecto en Angular 18, te recomiendo probar este enfoque desde el inicio.