Angular 6 – Lo que se viene este 2018

La fase angular 6 RC ha comenzado. Angular v6 framework ahora es una característica completa.

La versión estable de Angular 6 debería ser lanzada muy pronto. Según el calendario oficial,  la versión estable de Angular 6 se lanzará en la primera semana de abril de 2018 .

Angular 6-rc.0 se lanzó el 21 de marzo de 2018,

antes de que se libere una versión beta más beta.8 de angular 6 . Angular 6 – beta.8 no se planificó según el calendario oficial 

Analicemos una por una las características y los cambios de corte de angular 6 -rc.0 y angular 6 -beta.8.

Lanzado con muchas características nuevas, correcciones de errores y algunos cambios de última hora.

Características

  • Agrega soporte para crear elementos personalizados basados ​​en componentes Angular.
  • Animaciones:  expone el elemento y los params dentro de los mezcladores de transición.
  • Bazel:  cambia la regla ng_package a APF v6
  • Ahora  puede crear comentarios de una línea , multilínea y jsdoc .
  • compilador-cli: agregar recursos en línea a ngc
    • Se debe reemplazar la propiedad templateUrl y styleUrls en todos los componentes con el decorator @Component con las  propiedades template  y styles .
      Cuando angularCompilerOptions { enableResourceInlining : true }  la salida .js de ngc no tendrá una plantilla de carga lenta Url o styleUrls. Tenga en cuenta que esto requiere que haya recursos disponibles para cargar estáticamente en tiempo de compilación.
  • Compatibilidad con TypeScript 2.7: requiere el nodejs 8 como motor de tiempo de ejecución 
  • Mejoras en la API de testeo:  agregue el seguimiento de tareas a Testability
    • Los usuarios ahora pueden pasar un tiempo de espera a  whenStable ( ) . Si todavía hay macrotasks pendientes cuando se produce el tiempo de espera, la devolución de llamada recibirá una lista de tareas pendientes (proporcionada por la especificación de zona TaskTracking).whenStable ( )  ahora también acepta una devolución de llamada opcional para invocar cada vez que cambie el estado de las macrotasks pendientes. Si esta devolución de llamada devuelve verdadero,  whenStable ( )  cancelará la devolución de llamada realizada pendiente, lo que permite a los usuarios un mayor control sobre las macrotasks que esperan.
  • Marque los paquetes angulares como efectos secundarios sin costo : este indicador es recogido por el paquete web v4 y se usa para optimizaciones más agresivas.
  • Actualizaciones de API de proveedores que se pueden agitar en los árboles :
    • Renombrar @Injectable ( { scope -> providedIn } ) .
      En lugar de { providedIn: APP_ROOT_SCOPE } , acepta { providedIn: ‘root’ } . Además, { providedIn: null } implica que el inyectable no debe agregarse a ningún ámbito.
  • Actualizar tslib a 1.9.0
  • Rompiendo cambios
  • La   etiqueta <template > quedó en desuso en Angular v4 para evitar colisiones (es decir, cuando se utilizan componentes web).
    • hasta ahora podemos usar esa etiqueta usando configurando
# tsconfig.json
{
  # ...
  "angularCompilerOptions": {
      # ...
      # This option is no more supported and will have no effect
      "enableLegacyTemplate": [true|false]
  }
}

beta-.8 elimina soporte para <template> .  <ng-template> se debe usar en su lugar.

  • ya no es posible importar funciones relacionadas con la animación de @angular/coreTodos los símbolos de animación ahora deben importarse de @angular/animations .
  • application/library package.json  debe actualizarse para proporcionar tslib 1.9.0 o superior para resolver la advertencia incompatible de peerDependencies.
 Ahora es una feature completa, las partes cli y material/cdk de la versión v6 y otras integraciones todavía están en obras y se completarán cuando se publique v6.0.0.
  • Caracteristicas
Desarrollo de aplicaciones angulares

Publicación anterior: características de angular 6 hasta angular 6 – beta.7 lanzado.

Las versiones beta para Angular 6 están listas. Recientemente se lanzó Angular 6.0.0-beta.7 .

Angular 6 será el compatible con Angular 5 . Por lo tanto, será fácil actualizar la aplicación angular 5 al angular 6.

Las versiones beta angulares se lanzan con una gran cantidad de correcciones de errores, nuevas funciones y cambios de última hora.

Ivy Renderer: Ivy es un nuevo procesador Angular compatible con versiones anteriores que se enfoca en mejoras de velocidad adicionales, reducción de tamaño y mayor flexibilidad. El equipo angular promete que cambiar a Ivy será suave. Esta importante función reducirá el tamaño del código y agilizará la compilación.

Bazel Compiler: Debido a que los cambios en el código fuente ocurren a menudo en pequeños incrementos, no tiene sentido reconstruir toda la aplicación para cada pequeño cambio. En cambio, solo deberíamos reconstruir el código que realmente cambió, y el código que depende de los cambios. Bazel solo reconstruye lo que es necesario. Con el almacenamiento en caché local y distribuido avanzado, el análisis de dependencia optimizado y la ejecución en paralelo, obtiene compilaciones rápidas e incrementales. Entonces podemos suponer que esta sería la característica importante de la compilación incremental.

Closure Compiler: Closure Compiler es el optimizador de agrupamiento utilizado para crear artefactos JavaScript para casi todas las aplicaciones web de Google. El compilador de cierre genera consistentemente paquetes más pequeños y hace un mejor trabajo en la eliminación del código inactivo en comparación con los empaquetadores de paquetes web y acumulativos.

Kit de desarrollo de componentes (CDK): CDK ya está incluido en una biblioteca de materiales angulares, que ofrece más de 30 componentes de interfaz de usuario. CDK nos permite construir nuestra propia biblioteca de componentes UI usando Angular Material.

Trabajador de servicio: el  trabajador de servicio es un script que se ejecuta en el navegador web y administra el almacenamiento en caché de una aplicación. El trabajador de servicio está incluido en el angular 5. En el servicio angular 6, el trabajador incluye correcciones de errores y características adicionales.

Características importantes de Angular 6 con respecto al propósito de desarrollo

  • Soporte de Typescript 2.6.x
  • Funciones de formularios
  1. AbstractControl statusChanges ahora emite un evento de ‘PENDING’ cuando llamas a AbstractControl markAsPending. Anteriormente no emitía un evento cuando llamabas a markAsPending.
  2. ngModelChange ahora se emite después de que el valor / validez se actualiza en su control.
    Anteriormente, ngModelChange se emitía antes de actualizar su control subyacente. Esto estuvo bien si pasó el valor directamente a través de la palabra clave $ event, por ejemplo
<input [(ngModel)]="name" (ngModelChange)="onChange($event)">
onChange(value) {
     console.log(value);   // would log updated value
}

Sin embargo, si tuviera un controlador para el evento ngModelChange que verificaba el valor a través del control, obtendría el valor anterior en lugar del valor actualizado. p.ej:

<input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">
onChange(ngModel: NgModel) {
   console.log(ngModel.value);        // would log old value, not updated value
}

Ahora el valor y la validez se actualizarán antes de que se emita el evento ngModelChange, por lo que la misma configuración registrará el valor actualizado.

onChange(ngModel: NgModel) {
   console.log(ngModel.value);       // will log updated value
}
  1. Múltiples validadores para el método de matriz de FormBuilder

De acuerdo con la documentación actual, solo podemos establecer un validador en el campo FormArray con el método FormBuilder.array. Ahora puede agregar los múltiples validadores para el método de matriz como se muestra a continuación:

Por ejemplo:

questionForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
  this.questionForm = this.formBuilder.group({
    text: ['', Validators.required],
    options: this.formBuilder.array([], [MyValidators.correctCount, MyValidators.totalCount])
  });
}
  1. Maneje la cuerda con y sin límite de línea en el validador de patrón.
    Anteriormente, el patrón Validator solo funciona con cadenas sin límites de línea (^ y $), el validador las agregará automáticamente a la cadena.
    En una nueva característica, solo agregará esos caracteres de límites si faltan
  • Enrutador : se agregó el evento navigationSource y restoredState to NavigationStart. de esta manera usted puede saber que si se activó una navegación de manera imperativa o mediante el cambio de ubicación.
  • Tipo genérico opcional para ElementRef 
@ViewChild('my-element') myElement:ElementRef;

Fuente: link

1 COMMENTS

LEAVE YOUR COMMENTS