En este post, vamos a discutir, las nuevas características de la última versión Angular 12, APIs obsoletos y la forma de migración 11

También te puede interesar: “Tiempo real con serverless usando Websocket en AWS”

Características:

Coalescencia nula:

Nullish Coalescing se introdujo por primera vez en Typescript y los desarrolladores pudieron escribir el código con un enfoque más limpio.

Y por lo tanto, ahora Angular plantilla de vista también es compatible con Nullish Coalescencia de Angular 12.

Puede considerar esta función como una forma de “recurrir” a un valor por defecto cuando trabaje con null o undefined. Cuando escribimos código como

Por ejemplo:

{{ foo ?? bar() }}

Esta es una nueva forma de decir que el valor foo se utilizará cuando esté “presente”; pero cuando sea null o undefined, calculará bar() en su lugar.

De nuevo, el código anterior es equivalente al siguiente.

{{ foo !== null && foo !== undefined ? foo : bar() }}

Formularios: introducir validadores de mínimo y máximo

Si tengo un <input type="number" min="0" [(ngModel)]="val" #num="NgModel">, debería poder asumir que num.valid será false cuando el valor de la entrada sea -10.

Se trata de una suposición básica y lógica que los desarrolladores harán, y hacer lo contrario, desde el principio, sin requerir una directiva adicional de “solución”, etc., es un flaco favor para ellos.

Corrección: Anteriormente los atributos min y max definidos en <input type="number"> eran ignorados por el módulo Forms. Ahora, la presencia de estos atributos activaría la lógica de validación mín/máx (en caso de que las directivas formControl, formControlName o ngModel también estén presentes en una entrada dada) y el estado correspondiente del control del formulario lo reflejaría.

Añadido el método historyGo al servicio Location:

historyGoque permitirá al usuario navegar a una página específica del historial de sesiones identificada por su
posición relativa a la página actual.

Documentación: https://angular.io/api/common/Location#historyGo

Ejemplo:

location.historyGo(2) avanza dos páginas y location.historyGo(-2) retrocede dos páginas. Cuando intentamos ir más allá de lo almacenado en la sesión del historial, nos quedamos en la página actual. El mismo comportamiento se produce cuando relativePosition es igual a 0

location.historyGo(2)

Soporte APP_INITIALIZER trabajo con observable

En Angular v12 podrás devolver directamente un Observable. Veamos cómo:

import { APP_INITIALIZER, FactoryProvider } from '@angular/core';
import { ConfigService } from "./config.service";

function loadConfigFactory(configService: ConfigService) {
  // Easy as pie  
  return () => configService.getConfig(); //  

  // How you might've done it “before”
  // return () => configService.getConfig().toPromise();
}

export const loadConfigProvider: FactoryProvider = {
  provide: APP_INITIALIZER,
  useFactory: loadConfigFactory,
  deps: [ConfigService],
  multi: true
};

Una cosa importante a tener en cuenta es que el Observable debe completarse, de lo contrario el proceso de arranque no continuará.

Admite metadatos de solicitud de cliente http para su uso en interceptores:

Anteriormente, cuando se utilizaba un interceptor http no se podían pasar metadatos sobre la solicitud al interceptor

Ahora, el contexto Http almacena valores arbitrarios definidos por el usuario y garantiza la seguridad de tipos sin conocer realmente los tipos. Cuenta con el respaldo de Map y garantiza que las llaves no choquen.

Documentación: https://angular.io/api/common/http/HttpContext

@Injectable()
export class UsersService {
  constructor(private http: HttpClient) {}
  
  getUsers() {
    return this.http.get('....', {
      context: return new HttpContext().set('cacheRequest', true); // We have added context here
    })
  }
}

Desactivación de animaciones mediante BrowserAnimationsModule.withConfig

Antes, la única forma de desactivar las animaciones era proporcionando la dirección NoopAnimationsModule, que no permitía desactivarlas en función de la información en tiempo de ejecución.

Estos cambios añaden soporte para desactivar animaciones basadas en información en tiempo de ejecución utilizando BrowserAnimationsModule.withConfig({disableAnimations: true}).

Documentación: https://angular.io/api/platform-browser/animations/BrowserAnimationsModuleConfig

APIs obsoletas:

Compatibilidad con IE11:

La compatibilidad de Angular con Internet Explorer 11 (IE11) de Microsoft está obsoleta y se eliminará en Angular v13.

Documentación: https://angular.io/guide/deprecations#internet-explorer-11

Nodo versión 10 o anterior:

Ya no puedes usar Angular con Node.js versión 10 o anterior.

Migración a Angular 12

Primero comprueba la versión de Angular de tu aplicación: Desde el directorio de tu proyecto, utiliza el comando ng version. Para que pueda seleccionar la versión en la guía de actualización interactiva dada por Angular.

Angular proporciona instrucciones completas en la guía interactiva para que pueda seleccionar las opciones basadas en su aplicación y le dará los pasos y la guía para la actualización.

Unimedia Technology

Aquí en Unimedia Technology tenemos un equipo de Cloud Native Developers que pueden ayudarte a desarrollar tus Aplicaciones AWS y Azure más complejas.