El proyecto en el que estoy trabajando recientemente para actualizar el cumplimiento de AOT y desde que sucedió, tengo problemas con | async tubería | async cuando se usa en HTML. Por ejemplo, mi código HTML se parece a lo siguiente:
<div *ngIf="(mySubscription$| async) !=null"> //some more html code </div> Como puede ver, mySubscription$ es una suscripción y solo estoy tratando de realizar una operación simple usando una tubería asíncrona. Este código siempre funcionó, pero desde la actualización de AOT, dejó de funcionar y arroja el siguiente error:
ERROR Error: Uncaught (in promise): Error: The pipe 'async' could not be found! Revisé varias publicaciones y ya intenté agregar commonModule a mi aplicación como se sugirió en otras publicaciones, pero hasta ahora no tuve suerte. Además, encontré este documento del sitio web oficial de Angular aquí: https://angular.io/guide/template-typecheck pero eso tampoco parece funcionar. La forma en que se declara el observable, parece
public mySubscription$: Observable<string> = null;Nuevamente, todos estos problemas comenzaron después de la habilitación de AOT e IVY.
Ahora, después de una mayor investigación, creo que estoy convencido de que hay algún problema con la forma en que CommonModule se carga en la aplicación como se menciona aquí: No se pudo encontrar la tubería 'async'
Pero estoy haciendo referencia al módulo común en mi App.Module, mi módulo de enrutamiento y mi módulo de funciones. También encontré otros componentes en la aplicación donde se carga el módulo común y se usa | async Pero parece que solo mi componente tiene problemas.
Además, la otra cosa que noté es que mi aplicación se carga bien la primera vez, siempre es la recompilación la que crea el problema con la carga del módulo. Ahora no estoy seguro de cuál sería la diferencia entre la primera compilación y la recompilación, ¿puede ser el orden en que se cargan los módulos? Pero en este punto, no estoy seguro de qué podría estar causándolo en particular.
¿Podría simplemente verificar que su componente esté declarado en su app.module.ts ?
Eso parece ser muy similar a este problema: https://fireflysemantics.medium.com/the-pipe-async-could-not-be-found-a42f8eb1b12d
Dos posibilidades de que tengamos este error serán
Si nos perdemos agregar Módulo común
importar { CommonModule } desde '@angular/common';
@NgModule({importaciones: [CommonModule] }) class FeatureModule {}
Si olvidamos agregar el componente en declaraciones: [] de ngModule
¿Su módulo de funciones tiene CommonModule en imports[]? ¿Su componente se agregó en las declaraciones: [] de ngModule?
No estoy sugiriendo que mantengas esta solución, pero puede ayudarte a seguir adelante mientras encuentras tiempo para limpiar después de la actualización de ivy.
en sus plantillas HTML cada vez que tenga un problema que solía funcionar ... puede intentar usar $any como una forma de convertir las cosas de una manera genérica. Esto sería un truco en el mejor de los casos .
<div *ngFor="let banana of ($any(theThingHere) | async)"> code or something... </div>Si esto resuelve el problema, puede examinar las diferencias de sintaxis e implementación de su versión anterior de angular y la versión actualizada más reciente. Muchas cosas cambiaron bajo el capó de ivy y actualizaciones de versiones relacionadas, incluidas actualizaciones del lenguaje TypeScript y cambios en la biblioteca RxJs.
En el mejor de los casos, genere un nuevo proyecto para implementar la canalización asíncrona y demuestre que funciona en la versión a la que se dirige y rastree las importaciones de su módulo en su base de código actual para verificar qué podría estar descargándolo.