4

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())
  }
}
Deitsch
  • 1,610
  • 14
  • 28
  • What version of Angular are you using – DTul Oct 19 '20 at 08:34
  • Can you show the (basic) code of your Component? No need for all methods, just class declaration and constructor. Also the NgModule where the component is declared. – Marc Sances Oct 19 '20 at 08:35
  • @DTul version 9.1.6 – Deitsch Oct 19 '20 at 08:36
  • @MarcSances updated my question. I'm also using an NgRx Effect to load the data. But should this effect the pipe error in any way? – Deitsch Oct 19 '20 at 08:41
  • in my experience, the error was coming also when there is issue in other parts. it looks Angular Ivy silently passes the error. so try to check the imports and dependencies of other related modules – critrange Oct 19 '20 at 08:57
  • I also get this warning `Can't bind to 'ngIf' since it isn't a known property of 'span'.` The site loads w/o error once i comment the `ion-list` (but with the warning). Not quite sure how to move forward tbh – Deitsch Oct 19 '20 at 09:07

3 Answers3

6

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

Vaibhav Mahajan
  • 222
  • 1
  • 5
0

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>
Chibuzor Nwankwo
  • 1
  • 2
0

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.
Dat ng
  • 1
  • 3