Las Novedades más Destacadas Que Trae Angular 14 – Parte 1

Nube Colectiva

hace 2 años

El mes de Junio de 2022 el equipo de Angular, anunció la versión Nro. 14 del framework en donde han lanzado componentes independientes, formularios escritos hasta nuevas primitivas CDK (Kit de Desarrollo de Componentes). Se han resuelto varias solicitudes importantes de la comunidad, asimismo esta versión incluye funciones y correcciones de errores aportadas directamente por los miembros de la comunidad, desde agregar tipado fuerte del enrutador hasta más mensajes de error tree-shakable. Esta versión es una que trae muchos cambios importantes y te recomiendo no perdertela, bien vamos con el Post y las novedades mas destacadas de Angular 14.

Partes

Parte 1
Parte 2 (Final)

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Antes de continuar, te invito a escuchar el Podcast: “Si No Tienes Experiencia Para Un Puesto De Trabajo, Créala !” y “Ventajas y Desventajas de Usar 2 o Más Monitores Para un Desarrollador” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Las Novedades más Destacadas Que Trae Angular 14 – Parte 1.

Como en otros Posts similares, para conocer mejor las novedades, colocaré el nombre de la novedad, un texto descriptivo y una imagen referencial. Ya que Angular 14 trae muchas novedades este Post será en 2 partes, para asi poder leer mejor estas nuevas características.

Componentes Independientes

Los componentes independientes de Angular, tienen como objetivo agilizar la creación de aplicaciones de Angular al reducir la necesidad de NgModules. En Angular 14, los componentes independientes están en versión preliminar para los desarrolladores. Están listos para usarse en tus aplicaciones y estudiarlas, pero no son una API estable por el momento y posiblemente cambiarán fuera de nuestro modelo típico de compatibilidad con versiones anteriores.


import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // includes NgIf and TitleCasePipe
import { bootstrapApplication } from '@angular/platform-browser';

import { MatCardModule } from '@angular/material/card';
import { ImageComponent } from './app/image.component';
import { HighlightDirective } from './app/highlight.directive';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    ImageComponent, HighlightDirective, // import standalone Components, Directives and Pipes
    CommonModule, MatCardModule // and NgModules
  ],
  template: `
    <mat-card *ngIf="url">
      <app-image-component [url]="url"></app-image-component>
      <h2 app-highlight>{{name | titlecase}}</h2>
    </mat-card>
  `
})
export class ExampleStandaloneComponent {
  name = "emma";
  url = "www.emma.org/image";
}

// Bootstrap a new Angular application using our `ExampleStandaloneComponent` as a root component.
bootstrapApplication(ExampleStandaloneComponent);

import { Component } from '@angular/core';

import { CommonModule } from '@angular/common'; // includes NgIf and TitleCasePipe

import { bootstrapApplication } from '@angular/platform-browser';

import { MatCardModule } from '@angular/material/card';

import { ImageComponent } from './app/image.component';

import { HighlightDirective } from './app/highlight.directive';

@Component({

selector: 'app-root',

standalone: true,

imports: [

ImageComponent, HighlightDirective, // import standalone Components, Directives and Pipes

CommonModule, MatCardModule // and NgModules

<mat-card *ngIf="url">

<app-image-component [url]="url"></app-image-component>

<h2 app-highlight>{{name | titlecase}}</h2>

</mat-card>

})

export class ExampleStandaloneComponent {

name = "emma";

url = "www.emma.org/image";

}

// Bootstrap a new Angular application using our `ExampleStandaloneComponent` as a root component.

bootstrapApplication(ExampleStandaloneComponent);

Con componentes independientes, directivas y canalizaciones, la flag standalone: true te permite agregar imports directamente en tu @Component() sin un archivo @NgModule.

Asimismo puedes explorar esta aplicación de demostración para obtener más información sobre cómo crear una aplicación Angular utilizando componentes independientes.

En esta versión de vista previa para desarrolladores, el equipo de Angular ha querido utilizar código abierto para asegurarse de que la versión independiente esté completamente preparada para su lanzamiento como una API estable. Agrega tu primer componente independiente con el comando ng generate componente <nombredetucomponente> — standalone, luego diríjete al repositorio GitHub de Angular a medida que comienzas a explorarlo.

En los siguientes meses, el equipo de Angular continuará desarrollando esquemas (schematics) como ng new <nombredetuapp> –standalone, además de documentar los casos de uso y el viaje de aprendizaje para este nuevo modelo mental simplificado. Ten en cuenta que en la vista previa para desarrolladores, pueden ocurrir cambios a medida que se continua implementando los diseños.

Puedes leer más sobre el pensamiento de diseño detrás de la implementación actual en los dos RFC y la revisión de diseño pública. Puedes seguir al equipo de Angular en Twitter para futuras actualizaciones de las APIs independientes.

Tipificación Estrica Para Formularios

Angular 14 cierra este problema reportado en su GitHub: implementar una tipificación estricta para el paquete Angular Reactive Forms.

Los formularios escritos garantizan que los valores dentro de los controles, grupos y arrays de formularios sean seguros para ecribir en toda la superficie de la API. Esto permite formas más seguras, especialmente para casos complejos profundamente anidados.


const cat = new FormGroup({
   name: new FormGroup({
      first: new FormControl('Barb'),
      last: new FormControl('Smith'),
   }),
   lives: new FormControl(9),
});

// Type-checking for forms values!
// TS Error: Property 'substring' does not exist on type 'number'.
let remainingLives = cat.value.lives.substring(1);

// Optional and required controls are enforced!
// TS Error: No overload matches this call.
cat.removeControl('lives');

// FormGroups are aware of their child controls.
// name.middle is never on cat
let catMiddleName = cat.get('name.middle');

const cat = new FormGroup({

first: new FormControl('Barb'),

last: new FormControl('Smith'),

}),

lives: new FormControl(9),

});

// Type-checking for forms values!

// TS Error: Property 'substring' does not exist on type 'number'.

let remainingLives = cat.value.lives.substring(1);

// Optional and required controls are enforced!

// TS Error: No overload matches this call.

cat.removeControl('lives');

// FormGroups are aware of their child controls.

// name.middle is never on cat

let catMiddleName = cat.get('name.middle');

Esta función es el resultado de una solicitud pública de comentarios y revisión del diseño, que se basó en la creación de prototipos, el trabajo y las pruebas anteriores de los colaboradores de la comunidad Angular.

Los esquemas de actualización permiten la migración incremental a formularios escritos, por lo que puedes agregar gradualmente escritura a tus formularios existentes con total compatibilidad con versiones anteriores. El comando ng update reemplazará todas las clases de formulario con versiones sin tipo (por ejemplo FormGroup > UntypedFormGroup). A continuación puedes habilitar los tipos a tu propio ritmo (por ejemplo UntypedFormGroup > FormGroup).


// v13 untyped form
const cat = new FormGroup({
   name: new FormGroup(
      first: new FormControl('Barb'),
      last: new FormControl('Smith'),
   ),
   lives: new FormControl(9)
});

// v14 untyped form after running `ng update`
const cat = new UntypedFormGroup({
   name: new UntypedFormGroup(
      first: new UntypedFormControl('Barb'),
      last: new UntypedFormControl('Smith'),
   ),
   lives: new UntypedFormControl(9)
});

// v13 untyped form

const cat = new FormGroup({

first: new FormControl('Barb'),

last: new FormControl('Smith'),

lives: new FormControl(9)

});

// v14 untyped form after running `ng update`

const cat = new UntypedFormGroup({

first: new UntypedFormControl('Barb'),

last: new UntypedFormControl('Smith'),

lives: new UntypedFormControl(9)

});

Para aprovechar la nueva compatibilidad con la tipificación, es recomendable buscar instancias de los controles Untyped de formulario y migrar a la nueva superficie API de formularios escritos cuando sea posible.


// v14 partial typed form, migrating `UntypedFormGroup` -> `FormGroup`
const cat = new FormGroup({
   name: new FormGroup(
      first: new UntypedFormControl('Barb'),
      last: new UntypedFormControl('Smith'),
   ),
   lives: new UntypedFormControl(9)
});

// v14 partial typed form, migrating `UntypedFormGroup` -> `FormGroup`

const cat = new FormGroup({

first: new UntypedFormControl('Barb'),

last: new UntypedFormControl('Smith'),

lives: new UntypedFormControl(9)

});

También se recomienda que las aplicaciones nuevas usen clases Form* a menos que la clase no se escriba intencionalmente (por ejemplo FormArray que tiene tanto números como strings). Puedes obtener más información en este enlace a la documentación oficial de Angular.

Mejores Prácticas Optimizadas

Angular 14 trae características integradas que permiten a los desarrolladores crear aplicaciones de alta calidad, desde enrutamiento hasta su editor de código, comenzando con nuevas guías de detección de cambios en angular.io

Accesibilidad Optimizada Para los Titulos de la Aplicación

Otra práctica recomendada es asegurarse que los títulos de las páginas de tu aplicación comuniquen de manera única el contenido de la página. En Angular 13.2 se agiliza esto con la nueva propiedad Route.title en el enrutador de Angular. En Angular 14, agregar un title ya no requiere importaciones adicionales y está fuertemente tipado, debido a una increible contribución de la comunidad por parte de Marko Stanimirović.


const routes: Routes = [{
  path: 'home',
  component: HomeComponent
  title: 'My App - Home'  // <-- Page title
}, {
  path: 'about',
  component: AboutComponent,
  title: 'My App - About Me'  // <-- Page title
}];

const routes: Routes = [{

path: 'home',

component: HomeComponent

title: 'My App - Home' // <-- Page title

}, {

path: 'about',

component: AboutComponent,

title: 'My App - About Me' // <-- Page title

}];

Puedes configurar una lógica de título más compleja proporcionando un archivo TitleStrategy.


const routes: Routes = [{
  path: 'home',
  component: HomeComponent
}, {
  path: 'about',
  component: AboutComponent,
  title: 'About Me'  // <-- Page title
}];

@Injectable()
export class TemplatePageTitleStrategy extends TitleStrategy {
  override updateTitle(routerState: RouterStateSnapshot) {
    const title = this.buildTitle(routerState);
    if (title !== undefined) {
      document.title = `My App - ${title}`;
    } else {
      document.title = `My App - Home`;
  };
};

@NgModule({
  …
  providers: [{provide: TitleStrategy,  useClass: TemplatePageTitleStrategy}]
})
class MainModule {}

const routes: Routes = [{

path: 'home',

component: HomeComponent

}, {

path: 'about',

component: AboutComponent,

title: 'About Me' // <-- Page title

}];

@Injectable()

export class TemplatePageTitleStrategy extends TitleStrategy {

override updateTitle(routerState: RouterStateSnapshot) {

const title = this.buildTitle(routerState);

if (title !== undefined) {

document.title = `My App - ${title}`;

} else {

document.title = `My App - Home`;

};

@NgModule({

…

providers: [{provide: TitleStrategy, useClass: TemplatePageTitleStrategy}]

})

class MainModule {}

En el código de ejemplo anterior, al navegar a /about se establecerá el título del documento en ‘Mi App – About Me’, mientras que al navegar a /home se establecerá el título del documento en ‘Mi App – Home’

Puedes obtener más información sobre esta función en el taller de Google I/O 2022 sobre compilación accesible con Angular en el siguiente video:

Diagnóstico Extendido Para el Desarrollador

Los nuevos diagnosticos extendidos proporcionan un framework extensible que te brinda más información sobre tus plantillas y cómo puedes mejorarlas. Los diagnósticos brindan advertencias en tiempo de compilación con sugerencias precisas y procesables para tus plantillas, detectando errores antes del tiempo de ejecución.

El equipo de Angular está entusiasmado con el framework flexible que esto presenta para que los desarrolladores agreguen diagnósticos en el futuro.

En Angular 13.2 se incluyó diagnósticos ampliados incorporados para ayudar a los desarrolladores a detectar 2 de los errores de plantilla más comunes.

Detectar el Error “Banana in a box” en los Data Bindings Bidireccionales

Un error de sintaxis común de los desarrolladores es voltear los corchetes y paréntesis en un enlace bidireccional, escribiendo ( [ ] ) en lugar de [ ( ) ]. Dado que ( ) parece una banana y [ ] parece una caja, el equipo de Angular lo apodo el error de banana en una caja, ya que la banana debe ir en la caja.

Si bien este error es una sintáxis técnicamente válida, la CLI de Angular puede reconocer que esto rara vez es lo que pretenden los desarrolladores. En Angular 13.2 se introdujo mensajes detallados sobre este error y orientación sobre cómo resolverlo, todo dentro de la CLI y tu editor de código.


Warning: src/app/app.component.ts:7:25 - warning NG8101: In the two-way binding syntax the parentheses should be inside the brackets, ex. '[(fruit)]="favoriteFruit"'.
        Find more at https://angular.io/guide/two-way-binding
7     <app-favorite-fruit ([fruit])="favoriteFruit"></app-favorite-fruit>
                          ~~~~~~~~~~~~~~~~~~~~~~~~~

Warning: src/app/app.component.ts:7:25 - warning NG8101: In the two-way binding syntax the parentheses should be inside the brackets, ex. '[(fruit)]="favoriteFruit"'.

Find more at https://angular.io/guide/two-way-binding

7 <app-favorite-fruit ([fruit])="favoriteFruit"></app-favorite-fruit>

~~~~~~~~~~~~~~~~~~~~~~~~~

Capturar la Fusión Nula en Valores Que No Aceptan Valores NULL

Los diagnósticos extendidos también generan errores para operadores coalescentes nulos inútiles (??) en plantillas angulares. Específicamente, este error se genera cuando la entrada no es “anulable”, lo que significa que su tipo no incluye null o undefined.

Los diangnósticos extendidos se muestran como advertencias durante la ejecución de los comandos ng build, ng serve y también en tiempo real con Angular Language Service. Los diagnósticos se pueden configurar en el archivo tsconfig.json, donde puedes especificar si los diagnósticos deben ser warning, error o supress.


{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      // The categories to use for specific diagnostics.
      "checks": {
        // Maps check name to its category.
        "invalidBananaInBox": "error"
        "nullishCoalescingNotNullable": "warning"
      },
      // The category to use for any diagnostics not listed in `checks` above.
      "defaultCategory": "suppress"
    },
    ...
  },
  ...
}

{

"angularCompilerOptions": {

"extendedDiagnostics": {

// The categories to use for specific diagnostics.

"checks": {

// Maps check name to its category.

"invalidBananaInBox": "error"

"nullishCoalescingNotNullable": "warning"

// The category to use for any diagnostics not listed in `checks` above.

"defaultCategory": "suppress"

...

}

Puedes obtener más información sobre los diagnósticos ampliados en la documentación oficial de Angular y en la esta publicación en el blog de Angular sobre diagnósticos ampliados.

Mensajes de Error Tree-shakeable

A medida que el equipo de Angular continua con las Guías de depuración angular, una contribución de la comunidad del usuario Ramesh Thiruchelvam agrega nuevos códigos de error de tiempo de ejecución. Los códigos de error robustos facilitan la referencia y la búsqueda de información sobre cómo depurar tus errores.

Esto permite que el optimizador de compilación sacuda los mensajes de error (strings largos) de los paquetes de producción, al tiempo que conserva los códigos de error.


@Component({...})
class MyComponent {}

@Directive({...})
class MyDirective extends MyComponent {}  // throws an error at runtime

// Before v14 the error is a string:
> Directives cannot inherit Components. Directive MyDirective is attempting to extend component MyComponent.

// Since v14 the error code makes this tree-shakeable:
> NG0903: Directives cannot inherit Components. Directive MyDirective is attempting to extend component MyComponent.

// v14 production bundles preserve the error code, tree-shaking strings and making the bundle XX smaller:
> NG0903

@Component({...})

class MyComponent {}

@Directive({...})

class MyDirective extends MyComponent {} // throws an error at runtime

// Before v14 the error is a string:

> Directives cannot inherit Components. Directive MyDirective is attempting to extend component MyComponent.

// Since v14 the error code makes this tree-shakeable:

> NG0903: Directives cannot inherit Components. Directive MyDirective is attempting to extend component MyComponent.

// v14 production bundles preserve the error code, tree-shaking strings and making the bundle XX smaller:

> NG0903

Para depurar un error de producción, el equipo de Angular recomienda dirigirse a sus guías de referencia y reproducir el error en un entorno de desarrollo para ver la cadena completa. El equipo de Angular continuará refactorizando de forma incremental los errores existentes para aprovechar este nuevo formato en versiones fufura de Angular.

Otras Mejoras Añadidas

Angular 14 incluye soporte para la última versión de TypeScript 4.7 y ahora tiene como objetivo ES2020 de forma predeterminada, lo que permite que la CLI de Angular envíe código más pequeño sin bajar de nivel.

Asimismo hay 3 características a destacar:

Enlace a Miembros de Componentes Protegidos

En Angular 14, ahora se puede enlazar miembros de componentes protegidos directamente desde tus plantillas, gracias a un contribución del usuario Zack Elliot.


@Component({
  selector: 'my-component',
  template: '{{ message }}',  // Now compiles!
})
export class MyComponent {
  protected message: string = 'Hello world';
}

@Component({

selector: 'my-component',

})

export class MyComponent {

protected message: string = 'Hello world';

}

Esto te brinda más control sobre la superficie de la API pública de tus componentes reutilizables.

Inyectores Opcionales en Vistas Incrustadas

Angular 14 agrega soporte para usar un inyector opcional al crear una vista incrustada a través de ViewContainerRef.createEmbeddedView y TemplateRef.createEmbeddedView. El inyector permite personalizar el comportamiento de inyección de dependencia dentro de la plantilla específica.


viewContainer.createEmbeddedView(templateRef, context, {
  injector: injector,
})

viewContainer.createEmbeddedView(templateRef, context, {

injector: injector,

})

Esto habilita APIs más limpias para crear componentes reutilizables y para componentes primitivos en Angular CDK.

OnPush de NgModel

Por último, una contribución de la comunidad por parte del usuario Artur Androsovych cierra un problema importante y garantiza que los cambios de NgModel se reflejen en la interfaz de usuario para los componentes de OnPush.


@Component({
  selector: 'my-component',
  template: `
    <child [ngModel]="value"></child>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
class MyComponent {}

@Component({

selector: 'my-component',

changeDetection: ChangeDetectionStrategy.OnPush

})

class MyComponent {}

Bien, hasta aquí llegamos con esta 1ra parte del Post en donde hemos visto un primer grupo de nuevas características que trae Angular 14.

Ten Paciencia, lo que quiero es que conozcas bien estas nuevas características y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.

Nota (s)

En la siguiente parte y última veremos el segundo grupo de nuevas características que trae Angular 14.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.