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()) } } 
6
  • What version of Angular are you using Commented Oct 19, 2020 at 8: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. Commented Oct 19, 2020 at 8:35
  • @DTul version 9.1.6 Commented Oct 19, 2020 at 8: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? Commented Oct 19, 2020 at 8: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 Commented Oct 19, 2020 at 8:57

3 Answers 3

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

Sign up to request clarification or add additional context in comments.

Comments

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> 

Comments

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.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.