title: angular2: how to get Full path on CanLoad guard while maintaining redirect url
body: <p>I am using angular 2.4 version and router version "^3.4.10".</p>
  
  <p>I am trying to handle redirect url using auth guard service.</p>
  
  <p>When user hit url 'domain/assignment/3/detail' and if user is not login then user redirected to 'domain/login' page. 
  and when user successfully login in to system then redirected to  'domain/assignment/3/detail' previous url which user tries to access.</p>
  
  <p>I have implemented CanLoad guard on assignment module. so when user tries to access url 'domain/assignment/3/detail' and if user is not login, url stores into redirectUrl property of authservice (this.authService.redirectUrl).</p>
  
  <p>so here is the issue comes in my case. i am not able to get full path of the url which user hit. 
  i am getting 'assignment' instead 'assignment/3/detail' within CanLoad guard.
  how can i get full path so that i can redirect user to proper path within CanLoad guard.</p>
  
  <p><strong>CanLoad:</strong></p>
  
  <pre><code> canLoad(route: Route): boolean {
  
              let url = `/${route.path}`; // here i got url path 'assignment' instead 'assignment/3/detail'
  
              return this.checkLogin(url);
          }
  </code></pre>
  
  <p><strong>Main routing</strong> app.routes.ts</p>
  
  <pre><code>const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent},
  {
      path: 'assignment',
      loadChildren: './assignment/assignment.module#AssignmentModule',
      canLoad: [AuthGuard]
  },
  { path: '**', redirectTo: '', pathMatch: 'full' }];
  </code></pre>
  
  <p><strong>Assignment routing:</strong> assignment-routing.ts</p>
  
  <pre><code>       const assignmentRoutes: Routes = [
          {
              path: '',
              component: AssignmentComponent,
              canActivate: [AuthGuard]
              children: [
                  {
                      path: '',
                      canActivateChild: [AuthGuard],
                      children: [
                          {
                              path: ':assignmentId/detail', component: AssignmentDetailComponent,
                              canActivate: [AuthGuard]
  
                          }
                        ]
                    }]
           }];
  </code></pre>
  
  <p>AuthGuard: auth-gurad.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {
      CanActivate, Router,
      ActivatedRouteSnapshot,
      RouterStateSnapshot,
      CanActivateChild,
      NavigationExtras,
      CanLoad, Route
  } from '@angular/router';
  import { AuthService } from './auth.service';
  
  @Injectable()
  export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
      constructor(private authService: AuthService, private router: Router) { }
  
      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
          let url: string = state.url;
          return this.checkLogin(url);
      }
  
      canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
          return this.canActivate(route, state);
      }
  
      canLoad(route: Route): boolean {
  
          let url = `/${route.path}`; // here i got url path 'assignment' instead 'assignment/3/detail'
  
          return this.checkLogin(url);
      }
  
  
  
       checkLogin(url: string): boolean {
              if (this.authService.isLoggedIn) {
                  if(this.authService.redirectUrl!=null){
                      let redirectUrl = this.authService.redirectUrl;
                      this.authService.redirectUrl = null;
                      this.this.router.navigate([redirectUrl]);
                  }
                  return true;
                  }
  
          // Store the attempted URL for redirecting
          this.authService.redirectUrl = url;
  
          // Navigate to the login page 
          this.router.navigate(['/login']);
  
          return false;
      }
  }
  </code></pre>