Componentes independientes

Angular v19 hará que standalone: true sea el valor predeterminado para componentes, directivas y pipes.

En la V14 se introdujo una vista previa para desarrolladores de la función "standalone", 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 por el equipo de Angular para escribir código Angular. El CLI genera componentes standalone: true de manera predeterminada, y la documentación de Angular enseña 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 aplicaciones más grandes escritas en Angular dentro de Google como en aplicaciones en toda la Internet.

Standalone no solo facilita la curva de aprendizaje y el uso del framework de Angular, sino que también ha habilitado algunas características nuevas emocionantes. En @angular/router, loadComponent simplifica significativamente la carga diferida de rutas a nivel de componente y se basa en la funcionalidad standalone. La API de Composición de Directivas permite un mejor modelo de composición para el comportamiento de los componentes, permitiendo que las directivas standalone se apliquen en la declaración de un componente o directiva anfitrión. Y, por supuesto, Deferrable Views carga de forma diferida y transparente los componentes y directivas standalone a nivel de plantilla, facilitando más que nunca la optimización de tus aplicaciones Angular.

En v19 daremos el siguiente paso, y cambiaremos el valor predeterminado de la opción standalone en componentes, directivas y pipes, para que nunca más tengas que escribir "standalone: true". Con este cambio, los componentes como:

@Component({
  standalone: true,
  imports: [UserAvatarComponent, AccountListComponent, FormsModule],
  selector: 'user-profile',
  template: './user-profile-component.html',
})
export class UserProfileComponent {…}

Ejemplo que muestra la opción standalone en Angular hoy.

Ahora se escribirán de esta manera:

@Component({
  imports: [UserAvatarComponent, AccountListComponent, FormsModule],
  selector: 'user-profile',
  template: './user-profile-component.html',
})
export class UserProfileComponent {…}

Ejemplo que muestra la opción standalone eliminada en v19

¿Qué pasa si sigo usando NgModules?

Eso está bien: no se está descontinuando la opción standalone ni los propios NgModules. Todavía podrás escribir componentes NgModule, especificando standalone: false en el decorador del componente.

¿Qué va a pasar con mi código existente, ya sea con Standalone o NgModules?

Como parte del ng update para v19, se aplicará una migración automatizada que:

• Se eliminará la etiqueta standalone: true a los componentes standalone existentes, ya que será el nuevo valor predeterminado.

• Se agregará standalone: false a los componentes ngModule existentes para que sigan funcionando.

Opcionalmente, podrás configurar la opción de compilador strictStandalone para exigir que solo se escriban componentes standalone en tu aplicación.

¿Qué pasa con FormsModule y otras bibliotecas npm con NgModules?

Aquí no cambiará nada. Los componentes standalone pueden seguir importando dependencias de NgModule según sea necesario, incluso con la opción de compilador strictStandalone habilitada.

Si estás creando una biblioteca publicada en NPM, tampoco necesitas hacer nada: tus componentes se comportarán correctamente cuando los usuarios los importen, independientemente de si están usando la V19 con el nuevo valor predeterminado o no.

Bonus: 

En la versión 19 se introduce la capacidad de detectar si un componente o directiva importada en un componente está realmente siendo utilizado, información que será mostrada en nuestro CLI como una advertencia acerca de los imports que no estamos usando, pero que están siendo llamados.

Si no deseas ver estos warnings, puedes añadir este código a: tsconfig.json

 

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "unusedStandaloneImports": "suppress"
      }
    }
  }
}

Quizás en esta versión o en las siguientes podamos ver la implementación de AI, como ser Gemini UI generativa como V0 o alguna otra herramienta útil de parte del equipo de Angular, el cual arduamente trabaja para mejorar nuestra experiencia como desarrolladores.

Articulo original aquí