Angular 9 , Ivy y Mas

La versión 9 de angular por fin esta aquí trayendo consigo muchos cambios interesantes e importantes y por fin el tan esperado compilador IVY , AOT y nuevos componentes por que listamos todo lo nuevo y daremos un repaso de lo mas importante .

• Depuración más rápida.
• Comprobación de tipos mejorado.
• Tiempos de carga más eficientes debido a que el compilador AOT está habilitado por defecto.
• Mejor manejo de Errores a la hora de la construcción de proyectos.
• El uso por defecto del compilador Ivy es uno de las características más importantes de Angular 9 , ya que es un gran modo de mejorar el rendimiento y el tamaño de los archivos.
• Soporte de enlaces sin selector para Angular Ivy.
• Soporte de internacionalización para el compilador Ivy.
• Soporte para el formato de diagnóstico de Typescript.
• Soporte para más ámbitos en providedIn.
• Paquetes más pequeños y mejor rendimiento.
• Por último un nuevo tipo seguro cambiando el uso de TestBed.inject() por TestBed.get() .

Depuración más rápida:

Ivy viene con más herramientas para depurar nuestras aplicaciones. Cuando corremos nuestro proyecto en modo de desarrollo con Ivy podemos usar las directivas ng.Object :

• ng.applyChanges: Marca un componte para su verificación (en el caso de los componentes OnPush) y realiza de forma sincronizada la detección de cambios en la aplicación a la que pertenece el componente.

ng.applyChanges(componente: {}): void 
// componente {} es el componente a marcar para verificación.
// void : retorna vacío

• ng.getComponent: Retorna la instancia del componente asociada con un elemento DOM dado.

Llamar a getComponent en devolverá la instancia de ComponenteHijo asociada con este elemento DOM.
Llamar a la función en devolverá la instancia de MyApp.

estructura de ng.getComponent:

ng.getComponent<T>(elemento: Element): T | null 
// Element : Es el elemento del DOM que debe ser retornado del componente 
// T | null : Instancia de componente asociada con el elemento o null si no hay ningún componente asociado con él.

• ng.getContext: Si está dentro de una vista incrustada (por ejemplo, * ngIf o *ngFor), retorna el contexto de la vista incrustada de la que forma parte el elemento. De lo contrario, retorna la instancia del componente cuya vista posee el elemento (en este caso, el resultado es el mismo que llamar a getOwningComponent).

ng.getContext<T>(element: Element): T | null
// Element Es el elemento para el que obtener la instancia del componente circundante.
//T | null : Instancia del componente que está alrededor del elemento o null si el elemento no está dentro de ningún componente.

• ng.getDirectives : Retorna instancias directivas asociadas con un elemento DOM dado. No incluye instancias de componentes.

Llamar a getDirectives en < button > devolverá una matriz con una instancia de la directiva MiBoton que está asociada con el elemento DOM.
Llamar a getDirectives en < my-comp > devolverá una matriz vacía.

estructura de ng.getDirectives :

ng.getDirectives(element: Element): {}[]
// Element : Es el Elemento DOM para el que obtener las directivas.
// {}[] : Es un arreglo de directivas asociado con el elemento

• ng.getHostElement : Retorna el elemento host de un componente o instancia directiva. El elemento host es el elemento DOM que coincide con el selector de la directiva.

ng.getHostElement(componentOrDirective: {}): Element 
// componentOrDirective {} : Componente o instancia directiva para la que se debe retornar el elemento host
//Element : Retorna elemento anfitrión(Host)del objetivo

• ng.getInjector: Retorna un inyector asociado con un elemento, componente o instancia directiva.

ng.getInjector(elementOrDir: {} | Element): Injector
// {} | Element : Elemento DOM, componente o instancia directiva para la cual retorna el inyector.
// Injector : Inyector asociado al elemento, componente o instancia directiva.

• ng.getListeners: Retorna una lista de escuchas(listeners) de eventos asociados con un elemento DOM. La lista incluye escuchas de host, pero no incluye escuchas de eventos definidos fuera del contexto angular (por ejemplo, a través de addEventListener).

Llamar a getListeners en

devolverá un objeto que se ve de la siguiente manera:

estructura de ng.getListeners :

ng.getListeners(element: Element): Listener[]
// Element: Es el elemento para el que se deben recuperar los escuchas(listeners) del DOM.
// Listener[] : Matriz de escuchas(listener) de eventos en el elemento DOM

• ng.getOwningComponent: Retorna la instancia del componente cuya vista contiene el elemento DOM.

Por ejemplo, si se usa en la plantilla de
(es decir, un ViewChild de ),
llamar a getOwningComponent en devolvería .

estructura de ng.getOwningComponent :

ng.getOwningComponent<T>(elementOrDir: {} | Element): T | null
// elementOrDir : Matriz de escuchas(listeners) de eventos en el elemento DOM
// T| null :  Instancia de componente cuya vista posee el elemento DOM o nulo si el elemento no es parte de una vista de componente

• ng.getRootComponents : Retorna todos los componentes raíz asociados con un elemento DOM, directiva o instancia de componente. Los componentes de la raíz son aquellos que han sido procesados o iniciados por Angular.

ng.getRootComponents(elementOrDir: {} | Element): {}[]
// {} | Element: Elemento DOM, componente o instancia directiva para el cual retornar los componentes de la raíz.
// {}[] : Componentes de raíz asociados con el objeto de destino.

Ahora los test E2E soportan grep y tambien invertGrep:

Cuando se corre el constructor Protractor es posible usar las opciones de greep y invertgreep para elegir mas fácilmente el tipo de test que se quiere ejecutar.

ng e2e --grep searchTerm

Comprobación de tipos mejorado:

Ahora el compilador de angular puede verificar más tipos dentro de nuestras aplicaciones a las cuales se les puede aplicar reglas más estrictas para detectar errores de más rápido durante el proceso de desarrollo los dos principales indicadores son :

• fullTemplateTypeCheck: Activando este indicador le decimos al compilador que revise todo lo correspondiente a la plantilla (ngIf , ngFor , ng-template , etc).
• strictTemplates: Activando este indicador le decimos al compilador que aplique las reglas más estrictas del sistema de tipos para la verificación de tipos.

Los modos de comprobación del compilador son:

• Modo Básico: Angular valida solo las expresiones de nivel superior en una plantilla.
• Modo Completo: Revisa vistas como *ngIf *ngFor ,ademas de que las tuberías o Pipes tengan el tipo de retorno correcto, Las referencias locales a directivas y tuberías tengan el tipo correcto (a excepción de cualquier parámetro genérico, que será igual a cualquiera).
• Modo Estricto: (este solo está disponible en angular 9 con ivy). ## Paquetes más pequeños y mejor rendimiento: El compilador ivy fue creado para quitar partes de Angular que no son usadas usando la técnica de webpack Tree Shaking y así generar menos código con cada componente.

Mejoras en la implementación de estilos y clases de CSS:

Ahora se puede usar más de una definición de estilo sin que destruya las demás definiciones por ejemplo:

Anteriormente, cualquier enlace que se evaluará al final ganaría, y esto podría depender del momento de los cambios en estas expresiones , Si las directivas miColor y miOtroColor son ambas indefinidas el estilo estático color azul sería ignorado.

Con la versión 9, puede administrar sus estilos a través de un orden de precedencia claro y consistente que no depende del tiempo, pero los estilos más específicos siempre tendrán la mayor prioridad , por ejemplo :

[style.color] anula un enlace conflictivo a[style].

sin embargo para evitar conflictos de compatibilidad con versiones anteriores el comportamiento de [ngStyle] y[ngClass] permanecen intactos.
pero como punto a favor ahora se puede utilizar propiedades CSS también conocidas como variables CSS.

Mejor manejo de Errores a la hora de la construcción de proyectos:

El nuevo compilador de Ivy no solo es rápido sino que provee mayor seguridad de tipado lo que hace que todos los mensajes de error sea más fáciles de leer .

Nuevas opciones para 'providedIn':

Cuando creamos un servicio @Injectable en Angular debemos elegir donde debe agregar el inyector además de la raíz o root y las opciones de módulo hay dos opciones adicionales :

• plattform al usar ProvideIn : 'platform' indicamos que el servicio esté disponible en un inyector de plataforma único especial que será compartido con todas las aplicaciones en la página.
• any Proporciona una instancia única en cada módulo (incluidos los módulos diferidos) que inyecta el token.

Enlaces sin selector para Angular Ivy:

Una característica que se perdió con el lanzamiento de la versión de Angular 8 era el uso de las directivas sin selector:

El motor de render anterior sí que soporta este patrón, pero sin la notación @directive identificando la clase de BaseDir como una directiva, el compilador Ivy no interpretaba la información sobre los parámetros del constructor.
Gracias a la forma en la que se ha mejorado la implementación del motor de render Ivy, en la nueva versión de Angular 9 ya podemos contar nuevamente con el uso de las Directivas sin selector.

Internacionalización mas fácil:

ahora es mas sencillo poder soportar escritura de derecha a izquierda ya que ahora puede consultar la dirección actual en durante la ejecución.

Nueva opción en en Cli al generar componentes:
Por lo general los componentes de angular son desplegados usando la propiedad inline por defecto para la mayoría de elementos DOM.Es muy común querer usar display: block en el estilo por lo cual ahora es posible de esta manera:

 typescript 
ng generate component my-component --displayBlock

y si quieres que al generar un nuevo componente por defecto usar display: block lo puedes hacer de dos formas :
en el angular.json agregar en los schematics :

 typescript 
"projectType": "application",
"schematics": {
    "@schematics/angular:component": {
      "displayBlock": true
   }
 }

o simplemente en el cli usando :

 javascript 
ng config schematics.@schematics/angular:component.displayBlock true 

TSLint 6.1 por defecto:

Si deseas usar lo ultimo de Tslint debes asegurarte de que estas usando la version 9.1 y luego puedes actualizar asi:

 javascript 
ng update @angular/cli --migrate-only tslint-version-6 

recuerda hacer commit antes de migrar ya que hay algunos cambios menores que podrían resultar un inconveniente debido a ello la migración no corre automáticamente.

Nuevas eliminaciones de APIs deprecadas :

En @angular/core Renderer cambia a Renderer2
@angular/core RootRenderer cambia a RendererFactory2
@angular/core RenderComponentType cambia a RendererType2
@angular/service-worker Archivos Versionados (VersionedFiles) cambia a files esto lo podemos ver en ngsw-config.json ejemplo.

Bonus:

Actualización más viable ,ahora cuando usamos ng update tenemos

1. Procesos de actualización más clara : ahora al actualizar se podemos ver más información
2. Depuración más fácil al actualizar : de dos maneras utilizando tenemos más información.

• ng update ejecuta todas las migraciones y deja los cambios agregados en el disco para ser inspeccionados y comparados
• ng update --create-commits La herramienta confirma el estado de su código base después de cada migración, para que pueda ver y entender o depurar los cambios que se están realizando en su código.

Ahora es más fácil usar el reproductor de YouTube y Google Maps en Angular debido a que ahora forman parte de los componentes oficiales de angular pueden dar un vistazo.

Componentes de Angular

Como recomendación la extensión language service la cual ha recibido muchos cambios y mejoras desde plantillas , resaltado de sintaxis, navegación hacia directorio.

Link hacia VSCode