How to use Ngrx navigation function?

61 views Asked by At

I came across navigation from NgRx. After reading the documentation my understanding is this effect will be triggered when the component is loaded. But unfortunately this effect is not getting triggered. I have tested with other effects & they are triggering as expected

export class RouterEffects {

  private actions$ = inject(Actions);
  private routerFacade: RouterFacade = inject(RouterFacade);
  private shellFacade: ShellFacade = inject(ShellFacade);
  private appService: AppService = inject(AppService);
  private router = inject(Router);

  getProfile$ = createEffect(() =>
    this.actions$.pipe(
      navigation(LoginComponent, {
        run: (a: ActivatedRouteSnapshot, ...slices): Observable < Action > | Action | void => {
          console.log('hello')
          return this.appService.getProfile()
            .pipe(map((profile) => ({
              type: 'Load',
              todo: profile
            })))
        },
        onError: (a: ActivatedRouteSnapshot, e: any) => {
          console.log(e)
          return null
        }
      })
    ));
}

The effect is also added to the standalone application config

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([httpInterceptor])),
    provideRouter(appRoutes),
    provideStore({
      router: routerReducer
    }),
    provideState({
      name: SHELL_FEATURE_KEY,
      reducer: shellReducer
    }),
    provideEffects([ShellEffects, RouterEffects]),
    provideRouterStore({
      //serializer:RouteSerializer
    }),
    provideStoreDevtools({
      // dev tool config
    })
  ],
};

My question is what I am doing wrong and how I can make navigation function work

1

There are 1 answers

0
brk On

Finally got the answer

We need to add FullRouterStateSerializer class in provideRouterStore serializer

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withInterceptors([httpInterceptor])),
    provideRouter(appRoutes),
    provideStore({
      router: routerReducer
    }),
    provideState({
      name: SHELL_FEATURE_KEY,
      reducer: shellReducer
    }),
    provideEffects([ShellEffects, RouterEffects]),
    provideRouterStore({
      serializer: FullRouterStateSerializer

    }),
    provideStoreDevtools({
      // dev tool config
    })
  ],
};