Domine Angular 17 Una guía de estudio que le ayudará a aprender la nueva versión de Angular

Esta semana saldrá la nueva versión de Angular.

🎯Cambios y novedades en angular 17

En este artículo, enumero los cambios más importantes y las nuevas características, también comparto recursos que te enseñarán cómo funcionan estas nuevas características de Angular:

• Nuevo flujo de control declarativo
• Bloques de carga diferida
• Soporte para la API de transiciones de vistas
• Soporte para pasar @Component.styles como string
• El código de animaciones de Angular es lazy-loadable
• Compatibilidad con TypeScript 5.2

Cambios importantes adicionales:

• El núcleo de Signal API es ahora estable (PR)
• Los componentes basados en Signal aún no están listos, no formarán parte de Angular 17
• Se ha eliminado el soporte de Node.js v16 y la versión mínima de soporte es v18.13.0 (PR)
• Esperamos que Esbuild sea el constructor por defecto y que el servidor de desarrollo por defecto use Vite.

📌Nuevo flujo de control declarativo
RFC: flujo de control incorporado

Angular 17 tiene una nueva sintaxis de bloque de control de plantilla y un flujo de control declarativo. Contiene bloques para:

Renderizado condicional (@if, @else, @switch, @case y @default)

La representación de los elementos de una colección (@for) y la gestión de colecciones vacías con el bloque @empty.

Uno de los beneficios más importantes de estos nuevos bloques de control es que soportarán aplicaciones zoneless con Signals.

Para demostrar cómo funcionan los nuevos bloques de control, he aquí un pequeño ejemplo.

Creo una casilla de verificación y la vinculo a la señal isChecked. El valor por defecto de la señal es true, por lo que inicialmente la casilla de verificación está marcada, y el contenido del bloque @ifse muestra:

<div>
  <input #checkbox type="checkbox" [checked]="isChecked()" (change)="isChecked.set(checkbox.checked)" id="checkbox"/>
</div>
<div>
@if (isChecked()) {
  <span>Checked</span>
} 
@else {
  <span>Not checked</span>
}
</div>

La sentencia @if (expresión_lógica) { crea un bloque @if con una expresión lógica. Utilizo la señal isChecked() como expresión lógica, ya que se evalúa como un valor booleano.

He añadido un bloque @else bajo el bloque @if, que se muestra cuando la expresión lógica del bloque @if se evalúa como false, es decir, en nuestro caso, si el valor de la señal isChecked() es false. Así que si desmarco la casilla, Angular muestra el contenido del bloque @else.

📌Bloques de carga diferida
RFC: Carga diferida

En la nueva versión Angular 17, el equipo de Angular empuja lazy-loading al siguiente nivel: Angular ahora tiene un bloque de control @defer que permite la carga perezosa del contenido del bloque.

Lazy-loading también se aplica a las dependencias del contenido del bloque:

Todos los componentes, directivas y pipes serán lazy-loaded, también.

Compatibilidad con la API de transiciones de vista
Documentación oficial: withViewTransitions

PR: feat(router): Añadir función para dar soporte a la API View Transitions

Esta función añade soporte a la API View Transitions. Esta API permite animaciones sencillas al pasar de un estado DOM a otro. Netanel Basal explica cómo utilizar las transiciones de vista desde Angular en su artículo.

📌Soporte para pasar @Component.styles como una cadena.
Docs oficiales: Component.styles

PR: feat(core): soportar estilos y styleUrl como cadenas.

Podemos pasar una cadena que contenga reglas CSS al atributo styles de @Component:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styles: `/* 👈 */
h3 {
  background-color: red; 
}
`
})
export class AppComponent { }

📌El código de animaciones de Angular es lazy-loadable
PR: feat(animaciones): Proporcionar una forma de carga perezosa de las animaciones

Podemos habilitar la carga perezosa del código de animaciones con la nueva función provideLazyLoadingAnimations():

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimationsAsync(),
    // ...
  ],
}).catch((err) => console.error(err))

Si usamos provideLazyLoadingAnimations(), el tamaño del bundle principal se reduce en unos 16Kb, y el código de animación se carga bajo demanda.

📌Soporte para TypeScript 5.2
PR: feat(core): soporte TypeScript 5.2

Daniel Rosenwasser destacó las novedades más interesantes de TS en su anuncio (Announcing TypeScript 5.2):

• Uso de declaraciones y gestión explícita de recursos
• Metadatos de decorador
• Elementos tupla con nombre y anónimos
• Uso más sencillo de métodos para uniones de matrices
• Copia de métodos de arrays
• Símbolos como Claves WeakMap y WeakSet
• Rutas de importación de sólo tipo con extensiones de archivo de implementación de TypeScript
• Completado de comas para miembros de objetos
• Refactorización de variables en línea
• Sugerencias de parámetros incrustados en los que se puede hacer clic
• Comprobaciones optimizadas para la compatibilidad de tipos en curso

Fuente