Angular 10/11: The pipe 'ngrxPush' could not be found

Question

When trying to use ngrxPush-pipe, I'm getting following error: "The pipe 'ngrxPush' could not be found"

I have installed the ngrx component:

npm install @ngrx/component --save

package.json: "@ngrx/component": "^10.0.1"

I'm importing the pipe in AppModule:

import { ReactiveComponentModule } from '@ngrx/component';

@NgModule({
  declarations: [],
  imports: [
     ReactiveComponentModule
  ],
bootstrap: [AppComponent]
})

And calling the pipe from AppComponent's template:

<vk-navigation *ngIf="!!(loaded$ | async)" [navigation]="navigation$ | ngrxPush"
  (toggleMenu)="setMenu($event)" (navigate)="navigatePath($event)">
</vk-navigation>

Any ideas what could go wrong? Error occurs in Angular 10 & 11, with NgRx component/10.

Tried also to disable Ivy with no luck for solving the error.

Navigation.component.ts:

export class NavigationComponent {

  @Input() navigation: any;

  @Output() navigate = new EventEmitter();
  @Output() toggleMenu = new EventEmitter();

  get showMenu() {
    return this.navigation.showMenu;
  }

  get showPrevNav() {
    return this.navigation.prev != null;
  }

  get showNextNav() {
    return !!this.navigation.next;
  }

  @HostBinding('class.navigationIsActive') get c1 () { return this.showMenu; }

  constructor() { }

}

App.component.ts:

export class AppComponent{

  loaded$: Observable<boolean>;
  showMenu$: Observable<boolean>; 
  navTree$: Observable<any>;
  currentPathId$: Observable<number>;
  currentDataId$: Observable<number>;
  navigation$: Observable<any>;
  
  constructor(private store: Store<fromRoot.State>, private router: Router, private route: ActivatedRoute) {

    this.loaded$ = store.pipe(select(fromRoot.selectLoaded));
    this.showMenu$ = store.pipe(select(fromRoot.selectShowMenu));
    this.navTree$ = store.pipe(select(fromRoot.selectNavTree)); 
    this.currentPathId$ = store.pipe(select(fromRoot.selectSelectedPathId));
    this.currentDataId$ = store.pipe(select(fromContact.selectSelectedQuestionId));
    this.navigation$ = store.pipe(select(fromRoot.selectNavigation)); 
    
    const wheel$ = fromEvent(document, 'wheel').pipe(
      throttleTime(300),
      tap((event) => event['deltaY'] > 0 ? this.navigatePath('next') : this.navigatePath('prev')) 
      ).subscribe();
  }

  @HostListener('swipedown', ['$event.target'])
    onSwipeDown(){this.navigatePath('prev')}

  @HostListener('swipeup', ['$event.target'])
    onSwipeUp(){this.navigatePath('next')}

  navigatePath(i: string){
    this.navigation$.pipe(
      map(nav => nav[i]),
      take(1),
      filter(nav => nav != null && nav != undefined)
    ).subscribe(nav => (typeof nav === 'number') ? 
    this.store.dispatch(LayoutActions.navigateDataObject({objectID:nav })) : 
    this.router.navigate([nav]) );
  }

  setMenu(showMenu:boolean){
    if(showMenu === true)
      this.store.dispatch(LayoutActions.closeMenu());
    else
      this.store.dispatch(LayoutActions.openMenu());
  }

  ngOnInit() {
    this.store.dispatch(LayoutActions.getPaths());
  }

}

Answer 1

You should first install the relevant package:

npm install @ngrx/component --save

or

yarn add @ngrx/component

probably you missed this step,

And then you can add it to your app.module.ts file:

import { NgModule } from '@angular/core';
import { ReactiveComponentModule } from '@ngrx/component';

@NgModule({
  imports: [
    // other imports
    ReactiveComponentModule
  ]
})
export class AppModule {}

Tested working well under:

"@angular/core": "~10.2.1"

installed package under package.json:

"@ngrx/component": "^10.0.1"

Answer 2

There are several reason why this may occur

You may not have installed the package.

This has been covered by @HDJEMAI in his solution

You may not have imported the ReactiveComponentModule in the module.

This is especially more often in lazy loaded modules and shared modules where you import the module in the AppModule but you forget to import it in SomeLazyLoadedModule. You will experience the same error

Cache problems

This is the most frustrating of the errors. You have implemented everything correctly but for some reason it doesn't work! The solution is usually to restart the server, restart the IDE or restart both and everything works