title: Angular 7 Route Guards Still Change URL
body: <p>My application cannot show a change in the url address screen.  Right now, my application rests at localhost:4200/, and that's it.  So I have taken the time to ensure that my navigation links disable the location change:</p>
  
  <pre><code>&lt;a [routerLink]="[screenPath]" skipLocationChange&gt;
  </code></pre>
  
  <p>And I have one centralized location in a service that handles routing when a change in a screen is necessary:</p>
  
  <pre><code>if (route) {
    this.router.navigate([newRoute], {relativeTo: route, skipLocationChange: true});
  } else {
    this.router.navigate([newRoute], {skipLocationChange: true});
  }
  </code></pre>
  
  <p>In my main app routing module, I skip the initial navigation:</p>
  
  <pre><code>@NgModule({
    imports: [RouterModule.forRoot(routes, {initialNavigation: false})],
    ....
  })
  </code></pre>
  
  <p>And in my child routes where my navigation happens, I have guards to prevent certain navigation from happening based on certain conditions:</p>
  
  <pre><code>const routes: Routes = [
  { path: 'somepath', component: SomeFormComponent, canActivate: [WorkFlowGuard] },
  { path: 'anotherpath', component: AnotherFormComponent, canActivate: [WorkFlowGuard]},
  ....
  ];
  </code></pre>
  
  <p>And my WorkFlowGuard returns a simple boolean to determine if the path is allowed or not:</p>
  
  <pre><code>canActivate(next: ActivatedRouteSnapshot,
            state: RouterStateSnapshot): Observable&lt;boolean&gt; | Promise&lt;boolean&gt; | boolean
  {
    // GRAB CURRENT PATH AND VERIFY
    const path = next.routeConfig.path;
    console.log(`GUARD - verify path: '${path}'`);
    const allow = this.verifyWorkFlow(path);
    return allow;
  }
  </code></pre>
  
  <p>When I am able to access a screen, or when I move to the next screen via a form button, the url up to does NOT change, and that's great!  However, any time the WorkFlowGuard gets activated and returns false to prevent me from accessing a certain screen, the url up top gets changed.  In other words, if I'm on 'somepath' and I try to access 'anotherpath' when I cannot, the url up top changes from</p>
  
  <p>localhost:4200/</p>
  
  <p>to</p>
  
  <p>localhost:4200/somepath</p>
  
  <p>Why is that happening and what can I do to prevent that URL change from happening?</p>