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

Issue

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())
  }
}

Solution

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:[])

Answered By - Vaibhav Mahajan