I've added a canLoad guard to a state that's lazy loaded. The problem that I'm having is that I can't get any route parameters if the state is being initialized from a different state using router.navigate().

So here is my route configuration:

path: 'programs/:programId/dashboard',
loadChildren: './program.module#ProgramModule',
canLoad: [ProgramGuard]

and this is the short version of ProgramGuard:

export class ProgramGuard implements CanLoad {

  canLoad(route: Route): Observable<boolean> {

    //route object doesn't have any reference to the route params

    let programId = paramFromRoute;

    return Observable.create(observer => {

       if (programId == authorizedProgramId)
        observerplete(true);
       else
        observerplete(false);
    }
  }
}

I have tried injecting ActivatedRoute to try to get them from there to get it from there, but nothing.

If the user types the URL in the browser, then there is no problem because I can extract the parameters from the location object. But when using route.navigate, the browser's location is still set to the previous state.

Any help or ideas will be greatly appreciated.

I've added a canLoad guard to a state that's lazy loaded. The problem that I'm having is that I can't get any route parameters if the state is being initialized from a different state using router.navigate().

So here is my route configuration:

path: 'programs/:programId/dashboard',
loadChildren: './program.module#ProgramModule',
canLoad: [ProgramGuard]

and this is the short version of ProgramGuard:

export class ProgramGuard implements CanLoad {

  canLoad(route: Route): Observable<boolean> {

    //route object doesn't have any reference to the route params

    let programId = paramFromRoute;

    return Observable.create(observer => {

       if (programId == authorizedProgramId)
        observer.plete(true);
       else
        observer.plete(false);
    }
  }
}

I have tried injecting ActivatedRoute to try to get them from there to get it from there, but nothing.

If the user types the URL in the browser, then there is no problem because I can extract the parameters from the location object. But when using route.navigate, the browser's location is still set to the previous state.

Any help or ideas will be greatly appreciated.

• javascript
• angular
• angular-ui-router

6 Answers 6

I tried to do something similar and ended up changing to a canActivate guard instead. Note also that the canLoad guards block any preloading that you may want to do.

In theory, if a user could not access a route, it would be great to not even load it. But it practice it seems to be too limited to allow making a determination.

Something you could try (I didn't think of it earlier when I was trying to do this) ... you could add a parent route (ponent-less) that has a canActivate guard that can check the parameters. Then route to the lazy loaded route if the user has authorization.

Now you can access the queryparams by using this snippet

this.router.getCurrentNavigation().extractedUrl.queryParams

inside the canLoad method and without losing lazyloading feature

I was able to retrieve the path including the route parameters using The Location object.

canLoad() {
   //dont even load the module if not logged in
   if (!this.userSessionService.isSessionValid()) {
     this.userSessionService.redirectUrl = this.location.path();
     this.router.navigate(['/auth']);
     return false;
   }
   return true;
}

You just need to inject the Location object in the constructor.

Why not building the url from the paths of the segments?

/**
 * Test if the user as enough rights to load the module
 */
canLoad(route: Route, segments: UrlSegment[]): boolean | Observable<boolean> | Promise<boolean> {
    // We build the url with every path of the segments
    const url = segments.map(s => s.path).join('/')

    // We handle the navigation here 
    return this.handleNavigation(url, route)
}

I know its too late, but I found the solution that work like charm. I hope this will help new members who face the same problem like me

  canLoad(
    route: Route,
    segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {
    if (!this.auth.isLoggedIn()) {
      this.route.navigate(['auth/login'], { queryParams: { redirect_url: '/' + segments[0].path } });
      return false;
    }
    return true;
  }

first you can declare variable Like the following :

routeSnapshot: ActivatedRouteSnapshot;

then in constructor call ActivatedRouteSnapshot class Like the following :

constructor(private routeSnapshot: ActivatedRouteSnapshot)

now you can use this.routeSnapshot into canLoad method