Angular 57: Mentalidad de migración — NgModules vs standalone
easy⏱ 5 mincourseangular
La forma antigua: NgModule + platformBrowserDynamic
Así arrancaba toda app Angular antes de que la v14 introdujera los componentes standalone, y sigue siendo Angular válido hoy. AppModule declara qué componentes le pertenecen, importa BrowserModule para el renderizado en navegador, y lista AppComponent como el que se debe arrancar. platformBrowserDynamic().bootstrapModule(AppModule) arranca luego ese módulo desde main.ts.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent],
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule).catch((err) => console.error(err));
Los componentes standalone pueden importar un NgModule, y viceversa
La migración no requiere tocar todo a la vez: un componente standalone puede listar un NgModule heredado en su arreglo imports para reutilizar sus declaraciones, y las declarations de un NgModule todavía pueden referenciar componentes mientras el resto de la app se traslada a bootstrapApplication. Este es el camino oficialmente soportado — convertir un componente, una ruta, un módulo a la vez.
Mismo resultado renderizado, radicalmente menos ceremonia
Ambas versiones arrancan una app que renderiza el mismo AppComponent. La versión standalone no necesita un módulo contenedor, ni un arreglo declarations, ni un arreglo bootstrap: el componente y la llamada de bootstrap dicen todo lo que antes decía el módulo.