角度10/11：找不到管道'ngrxPush'

Question

当尝试使用ngrxPush-pipe时，出现以下错误： “找不到管道'ngrxPush'”

我已经安装了ngrx组件：

npm install @ngrx/component --save

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

我正在AppModule中导入管道：

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

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

并从AppComponent的模板中调用管道：

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

任何想法可能出什么问题吗？ NgRx组件/ 10在Angular 10和11中发生错误。

还尝试禁用常春藤来解决该错误。

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

您应该首先安装相关的软件包：

npm install @ngrx/component --save

或

yarn add @ngrx/component

可能您错过了这一步，

然后您可以将其添加到您的app.module.ts文件中：

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

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

在以下条件下测试运行良好：

"@angular/core": "~10.2.1"

在package.json下安装了软件包：

"@ngrx/component": "^10.0.1"

Answer 2

出现这种情况的原因有多种

您可能尚未安装该软件包。

@HDJEMAI 在他的解决方案中已经涵盖了这一点

您可能没有在模块中导入 ReactiveComponentModule。

这在延迟加载模块和共享模块中尤其常见，在这些模块中，您在 AppModule 中导入模块但忘记在 SomeLazyLoadedModule 中导入。你会遇到同样的错误

缓存问题

这是最令人沮丧的错误。您已正确实施所有内容，但由于某种原因它不起作用！解决方法通常是重启服务器，重启IDE或重启两者，一切正常