title: Angular: how to call router.navigate() relative to target route in a RouteGuard?
body: <p>I have an existing project developed with Angular 4. I need to control the access to a particular route based on user-rights. The simplified route configuration looks like this:</p>
  
  <pre><code>[
      { path: '', redirectTo: '/myApp/home(secondary:xyz)', pathMatch: 'full' },
      { path: 'myApp'
        children: [
          { path: '', redirectTo: 'home', pathMatch: 'full' },
          { path: 'home', ... },
          ...
          { path: 'product'
            children: [
              { path: '', redirectTo: 'categoryA', pathMatch: 'full' },
              { path: 'categoryA', component: CategoryAComponent, canActivate: [CategoryACanActivateGuard]},
              { path: 'categoryB', component: CategoryBComponent},
              ...
            ]
          },
          ...
        ]
      },
      ...
  ]
  </code></pre>
  
  <p>Now, I want to control the access to <code>www.myWeb.com/myApp/product/categoryA</code>. If the user doesn't have enough permission, he/she will be redirected to <code>... /product/CategoryB</code>. I have written a <code>CanActivate</code> RouteGuard to do this, the guard class looks like this:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute } from '@angular/router';
  import { MyService } from '... my-service.service';
  
  @Injectable()
  export class CategoryACanActivateGuard implements CanActivate {
      constructor(private myService: MyService, private router: Router) { }
  
      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise&lt;boolean&gt; {
          return this.myService.checkPermission()
              .then(result =&gt; {
                  if (!result.hasAccess) {
                      //redirect here
  
                      this.router.navigate(['./myApp/product/categoryB']); 
                      //works, but I want to remove hardcoding 'myApp'
  
                      //this.router.navigate(['../../categoryB']);
                      //doesn't work, redirects to home page
  
                      //this.router.navigate(['./categoryB'], { relativeTo: this.route});
                      //do not have this.route object. Injecting Activated route in the constructor did not solve the problem
  
                  }
                  return result.hasAccess;
              });
      }
  }
  </code></pre>
  
  <p>Everything works fine, but I want redirect relative to the target route like the following:</p>
  
  <pre><code>this.router.navigate(['/product/categoryB'], { relativeTo: &lt;route-of-categoryA&gt;});
  // or 
  this.router.navigate(['/categoryB'], { relativeTo: &lt;route-of-categoryA&gt;});
  </code></pre>
  
  <p>Unfortunately, <code>relativeTo</code> accepts only <code>ActivatedRoute</code> objects and all I have is <code>ActivatedRouteSnapshot</code> and <code>RouterStateSnapshot</code>. Is there a way to navigate relative to the target route (in this case <em>categoryA</em>)? Any help will be really appreciated. </p>
  
  <p><strong>Note:</strong></p>
  
  <ul>
  <li>I can not change the route configuration other than adding some route-guards.</li>
  <li>I am not looking looking for <code>this.router.navigateByUrl</code> using <code>state.url</code>. I want to use <code>router.navigate([...], { relativeTo: this-is-what-need})</code>.</li>
  </ul>