The project that I am working on just recently for upgraded to AOT compliance and since that happened, I am having issues with | async pipe when used in HTML. For example my HTML code looks like following:
<div *ngIf="(mySubscription$| async) !=null">
//some more html code
</div>
As you can see that mySubscription$ is a subscription and I am just trying to perform a simple operation on it using async pipe. This code was always working but since AOT update, it stopped working and it throws following error:
ERROR Error: Uncaught (in promise): Error: The pipe 'async' could not be found!
I went through multiple posts and already tried adding commonModule to my app as suggested in other posts but no luck so far. Also, I came across this doc from Angular official website here: https://angular.io/guide/template-typecheck but that also does not seem to work. The way the observable is declared, looks like
public mySubscription$: Observable<string> = null;
Again, all these problems started after AOT and IVY enablement.
Now, after further investigation, I think I am convinced that there is some issue with the way the CommonModule is loading in the app as mentioned in here:The pipe 'async' could not be found
But I am referencing Common module in my App.Module, my routing module and my feature module. I also found other components in the app where common module is being loaded and are using | async But It sounds like only my component is having issues.
Also, the other thing that I noticed is that my app loads fine the first time, it is always recomilation that creates the issue with module loading. Now I am not sure what would be the difference between the first compilation and re-compilation, may the order in which the modules are loaded? But at this point, I am not sure what could be particularly causing it?
Could you just check that your component is declared in your app.module.ts ?
That seems to be very similar to this issue : https://fireflysemantics.medium.com/the-pipe-async-could-not-be-found-a42f8eb1b12d
Two chances that we got this error will be
If we miss adding common Module
import { CommonModule } from '@angular/common';
@NgModule({ imports: [ CommonModule ] }) class FeatureModule {}
If we miss adding the component in declarations:[] of ngModule
Does your feature module have CommonModule in imports[]? Does your componnet added in declarations:[] of ngModule?
I'm not suggesting you keep this solution but it may help you move forward while you find time to clean up after the ivy update.
in your HTML templates any time you have an issue that used to work... you can try using $any as a way to cast things in a generic way. This would be a hack at best.
<div *ngFor="let banana of ($any(theThingHere) | async)">
code or something...
</div>
If this resolves the issue, you can look into the syntax and implementation differences of your pervious version of angular and the newer updated one. A lot of things changed under the hood for ivy and related version updates including TypeScript language updates and RxJs library changes.
best case, generate a new project to implement the async pipe and prove it works in the version your targeting and trace your module imports in your current code base to check out what might be throwing it off.