Ionic/Angular: The pipe 'async' could not be found

Viewed 3031

When trying to access the observable holidayEntries$: Observable<HolidayEntry[]> in the html like

<ion-list lines="full" *ngFor="let holiday of holidayEntries$ | async">
    <ion-label>
        <h1>{{ holiday.author }}</h1>
    </ion-label>
</ion-list>

i always get the following error:

core.js:6228 ERROR Error: Uncaught (in promise):
Error: The pipe 'async' could not be found!

I've read that the CommonModule may be missing like mentioned at here, but i'm importing it in the corresponding .module.ts file.

Any idea what i'm doing wrong?

EDIT: My module

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HolidaysPageRoutingModule
  ],
  declarations: [HolidaysPage]
})
export class HolidaysPageModule {}

My component

@Component({
  selector: 'app-tab2',
  templateUrl: './holidays.page.html',
  styleUrls: ['./holidays.page.scss'],
})
export class HolidaysPage implements OnInit {
  currentUser$: Observable<UserVM>;
  holidayEntries$: Observable<HolidayEntry[]>;

  constructor(
      private readonly appStore: Store<fromApp.State>,
      private readonly holidayStore: Store<fromHoliday.State>) {

    this.currentUser$ = appStore.select(fromAuth.selectAuthUser).pipe(
      map(user => new UserVM(user))
    );

    this.holidayEntries$ = holidayStore.select(fromHoliday.selectHolidayEntries)
  }

  loadHolidays() {
    console.log("loading holidays")
    this.holidayStore.dispatch(HolidayActions.loadHolidayRequests())
  }
}
3 Answers

If the component at the route you're loading is not declared (via declarations:[]) then you will also get this type of error. Remove declaration of feature component from feature module and add to app.module.ts (via declarations:[])

What you want to do is instead

<ion-list lines="full" *ngFor="let holiday of (holidayEntries$ | async)">
    <ion-label>
        <h1>{{ holiday.author }}</h1>
    </ion-label>
</ion-list>

I think u can debug shortest find err.
-You test case see if it work. holidayStore.select(fromHoliday.selectHolidayEntries).subscribe(result=>{})

  • because NGRX is BehaviourSubject you need carefully.
Related