2

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?

Lost
  • 12,007
  • 32
  • 121
  • 193
  • 2
    Does this answer your question? [The pipe 'async' could not be found](https://stackoverflow.com/questions/39625321/the-pipe-async-could-not-be-found) – Yong Shun Aug 14 '21 at 02:44
  • Yes, I tried each of them. Just to be clear, I had no issues with my code for the longest time until the AOT update. So I think this has to do with the AOT update. – Lost Aug 14 '21 at 03:15
  • 1
    Could you please try removing the null check? – Mir entafaz Ali Aug 14 '21 at 16:12
  • Removed it, still the same issue. – Lost Aug 14 '21 at 16:27
  • 1
    What exactly did you do as part of this "upgrade to aot compliance"? – Roddy of the Frozen Peas Aug 15 '21 at 01:04
  • @RoddyoftheFrozenPeas, Since I was not involved in the upgrade, looking at the code it looks like some higher-level settings like `"aot": true` and `"enableIvy": true` plus referencing commonModule wherever required. – Lost Aug 15 '21 at 15:02

4 Answers4

2

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

Gauthier T.
  • 556
  • 1
  • 4
  • 16
  • So, I this component is registered in another module. Let's call it a feature module. The feature module does have the component declared. App module, which is the bootstrapping module, does not have a reference to this component. Does it need it though? – Lost Aug 16 '21 at 15:53
  • Also, what is extremely weird is that it compiles fine the first time, and then when ng serve reloads because you may have made a minute change, it fails with this particular error. – Lost Aug 16 '21 at 16:46
  • Are you sure that your component is properly declared in your feature module ? i'm not a professional on angular modules but you could try to move your component to the root module and check if it's working, and if it is, then move the component to the FeatureModule again. – Gauthier T. Aug 17 '21 at 14:14
1

Two chances that we got this error will be

  1. If we miss adding common Module

    import { CommonModule } from '@angular/common';

    @NgModule({ imports: [ CommonModule ] }) class FeatureModule {}

  2. 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?

Jobelle
  • 2,717
  • 1
  • 15
  • 26
1

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.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Jessy
  • 1,150
  • 16
  • 27
1

I believe it is answered in this post

The pipe 'async' could not be found

TLDR The async pipe is part of Angular's CommonModule and it isnt inherited by the child module. You might be getting this error due to the absence of CommonModule in your modules "import" Array.

wscttc
  • 356
  • 1
  • 5