El conocimiento es el nuevo dinero.
Aprender es la nueva manera en la que inviertes
Acceso Cursos

¡El futuro es standalone!

· 2 min de lectura
¡El futuro es standalone!

Angular v19 hará standalone: true por defecto para componentes, directivas y tuberías.

En la v14 introdujimos una característica «standalone» para desarrolladores, que hizo posible por primera vez construir una aplicación que no dependiera de NgModules. Desde entonces, standalone se ha estabilizado, y se ha convertido en la forma recomendada de escribir código Angular por el equipo de Angular.

La CLI genera componentes con standalone : true por defecto, y los documentos de Angular enseñan primero standalone a todos los nuevos desarrolladores de Angular.

La adopción es fuerte y sigue creciendo en todo el ecosistema Angular, tanto en las mayores aplicaciones Angular escritas en Google, así como aplicaciones en todo Internet.

Standalone no sólo hace que Angular sea más fácil de aprender y empezar a usar, sino que también ha habilitado algunas nuevas características interesantes. En @angular/router, loadComponent simplifica significativamente el lazy loading a nivel de ruta y se basa en la funcionalidad de standalone.

La API de composición de directivas permite un mejor modelo de composición para el comportamiento de los componentes al permitir que se apliquen directivas independientes en la declaración de un componente o directiva anfitrión. Y, por supuesto, Deferrable Views carga de forma perezosa y transparente componentes y directivas independientes a nivel de plantilla, lo que facilita más que nunca la optimización de tus aplicaciones Angular.

En la versión 19 daremos un paso más y cambiaremos el valor predeterminado de la bandera «standalone» en componentes, directivas y tuberías, de modo que nunca más tendrás que escribir «standalone: true». Con este cambio, componentes como:


@Component({
  standalone: true,
  imports: [UserAvatarComponent, AccountListComponent, FormsModule],
  selector: 'user-profile',
  template: './user-profile-component.html',
})
export class UserProfileComponent {…}
Ejemplo que muestra la bandera independiente en Angular hoy

se escribirá como:

@Component({
  imports: [UserAvatarComponent, AccountListComponent, FormsModule],
  selector: 'user-profile',
  template: './user-profile-component.html',
})
export class UserProfileComponent {…}
Ejemplo que muestra la bandera independiente eliminada en v19


¿Qué pasa si sigo utilizando NgModules?

No pasa nada, no estamos dejando obsoleta la opción standalone ni los propios NgModules. Podrás seguir escribiendo componentes NgModule especificando standalone: false en el decorador del componente.

¿Qué tendré que hacer con mi código standalone o NgModules existente?

Como parte de la actualización de ng para v19, aplicaremos una migración automatizada que:

  • Eliminar standalone : true para los componentes standalone existentes, ya que será el nuevo valor predeterminado.
  • Añadir standalone : false a los componentes NgModule existentes para que sigan funcionando.

Opcionalmente, podrás establecer la opción de compilador strictStandalone para forzar que sólo se escriban componentes standalone en tu aplicación.

¿Qué pasa con FormsModule y otras librerías npm con NgModules?

Nada cambiará aquí. Los componentes autónomos pueden seguir importando dependencias de NgModule según sea necesario, incluso con la opción de compilador strictStandalone activada.

Si eres el autor de una librería publicada en NPM, tampoco necesitas hacer nada - tus componentes se comportarán correctamente cuando sean importados por los usuarios independientemente de si están usando la v19 con el nuevo valor por defecto o no.

Fuente