Where to put navigation-related code in angular app?

Question

Currently I have in my AuthGuard constructor a subsription to redux state change below. It will just redirect to original page requested after login. This is not correct place but i don't know where it should be:

auth.guard.ts:

this.subscription = this.ngRedux.select<ILoginState>('login')
  .subscribe(newState => {
    if (newState.isLoggedIn) {
        let redirectUrl : string = ngRedux.getState().window.windowData.redirectUrl;
        if (!redirectUrl) {
          redirectUrl = '/map/' + this.tabService.sessionId;
        }
        this.router.navigate([redirectUrl]);
      }
  });

I have also other navigation related stuff like below. This is currently in a service that is supposed to manage different browser windows and state syncing across them:

/* track url changes and change redux state */
this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {   
    this.ngRedux.dispatch(this.windowActions.setOutletActiveRoute(event.urlAfterRedirects));
  }
});

Both could be in new navigation-service.ts in core or in app.component.ts. I read an article about not subscribing in angular service so maybe not service. Also putting everything in app.component sounds bad idea. I would like to put all navigation related stuff to it's own place to separate concerns. What would be recommended way?

You should not subscribe in authgaurd. Use get state instead because it will run on every route change. you don’t wanna leak memory by keeping many subscriptions open. — fastAsTortoise, Jun 01 '19 at 11:09
Yes. As I wrote in question the code is not supposed to be in authguard. The question is where. And the purpose of 1st piece of code is to react to login change. i can't use getState. i need to react to login state change that's why there is subsription. It can come after 1 hour. It would never redirect if i use only getState. And the latter code is supposed to run on every route change to sync the redux state for every route change. — char m, Jun 01 '19 at 11:45

score 0 · Answer 1 · answered Jun 01 '19 at 11:02

0

Create a app.navigator.ts file and put your navigation logic there, this is not a service or component just a ts file.

app.navigator.ts

......


/* track url changes and change redux state */
this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {   
    this.ngRedux.dispatch(this.windowActions.setOutletActiveRoute(event.urlAfterRedirects));
  }
});

......

answered Jun 01 '19 at 11:02

Srinivasan Sekar

2,049
13
22

Thanks for your anwer @Srinivasan! So is it an angular class? What benefits this approch have (apart from separation of concerns)? Would it be like app-navigation.ts or something? – char m Jun 01 '19 at 11:07
yeah you can name it app-navigation.ts as well. Main thing is maintainability and readability. Hope you have gone through https://angular.io/guide/styleguide – Srinivasan Sekar Jun 01 '19 at 11:10
Angular class? May not be , depends upon your need. We have a ts file named app.config.ts to hold config info no classes at all. – Srinivasan Sekar Jun 01 '19 at 11:13
if no class there is no this -operator for the subscription? – char m Jun 01 '19 at 11:41
1

I did not mean that. Since you have to subscribe and all you definitely need a class , I was trying to say it use classes defending upon your need. @charm Thanks – Srinivasan Sekar Jun 01 '19 at 11:42

Where to put navigation-related code in angular app?

1 Answers1