title: Angular 7 navigation forcibly returning to root
body: <p>I'm having an issue with routing since I've upgraded from Angular 5 to Angular 7. I've googled the hell out of this to no avail. </p>
  
  <p>Essentially the problem lays in navigating from one page to the other. If on the navbar, I select 'Plans' (as in payment plans), it brings me to the payment plans list (a list from Stripe). Then once I select a plan, I use router.navigate to go to a Stripe payment form page (Template driven form). I can see it navigate to the payment form page for a moment when I debug, but then it goes back to /.</p>
  
  <p><strong>My routes</strong>:</p>
  
  <pre><code>const appRoutes = [
  { path: 'home', component: HomeComponent },
  { path: 'accounts/login', component: LoginFormComponent },
  { path: 'accounts/register', component: RegistrationFormComponent },
  { path: 'plans', component: StripePlansComponent },
  //{ path: 'pay', component: StripeFormComponent, canActivate: [IsLoggedinGuardService, HasSelectedPlanGuardService] },
  { path: 'pay', component: StripeFormComponent },
  { path: 'privacy', component: PrivacyStatementComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
  </code></pre>
  
  <p>];</p>
  
  <p>I have my Pay route commented out at the moment to make sure that Gaurds are not to blame. </p>
  
  <p><strong>My navmenu component</strong>:</p>
  
  <pre><code>&lt;li class="nav-link" routerLinkActive="active"&gt;
      &lt;a [routerLink]="['plans']"&gt;
          &lt;span class='fa fa-money-bill-alt' style="margin-right: 10px"&gt;&lt;/span&gt; Pay &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>My plans component</strong>:</p>
  
  <pre><code>import { Component, Inject, OnInit, OnDestroy, ElementRef, ViewChild } from '@angular/core';
  import { Router } from '@angular/router';
  import { Observable } from 'rxjs/Observable';
  
  import { PaymentService } from '../../shared/services/payment.service';
  
  @Component({
      templateUrl: 'stripe-plans.component.html',
      styleUrls: ['stripe-plans.component.css'],
  })
  
  export class StripePlansComponent implements OnInit {
  
      public plans: Observable&lt;StripePlan[]&gt;;
      selectedPlan: StripePlan | undefined = undefined;
  
  constructor(private _paymentService: PaymentService, private _router: Router) {
  
  }
  
      ngOnInit() {
          this.plans = this.GetAllPlans();
      }
  
      GetAllPlans()  {
          return this._paymentService.getAvailablePlans();
      };
  
      ClickHandler(plan: StripePlan) {
          this._paymentService.setSelectedPlan(plan);
          this._router.navigate(['pay']);
      }
  }
  </code></pre>
  
  <p><strong>My plans HTML</strong> (I'm using the async pipe to handle subscribing/unsubscribing):</p>
  
  <pre><code>&lt;div class="center"&gt;
  &lt;h1&gt;Payment Plans&lt;/h1&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-sm-2" *ngFor="let plan of plans | async"&gt;
          &lt;div class="card" style="width: 18rem;"&gt;
              &lt;div class="card-header"&gt;
                  &lt;div class="price-container"&gt;
                      &lt;div class="price"&gt;
                          &lt;span class="label"&gt;Buy&lt;/span&gt;
                          &lt;span class="number"&gt;{{ plan.Amount / 100 | currency: plan.Currency:'symbol-narrow':'1.2-2' }}&lt;/span&gt;
                          &lt;span class="label"&gt;Now&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
                  &lt;h3 class="card-title"&gt;{{ plan.PlanId }}&lt;/h3&gt;
                  &lt;p class="card-text"&gt;{{ plan.Amount / 100 | currency: plan.Currency:'symbol-narrow':'1.2-2' }} per {{ plan.Interval }} &lt;/p&gt;
                  &lt;a href="#" class="btn btn-primary" (click)="ClickHandler(plan)"&gt;Select&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p></p>
  
  <p>As you can see in the javascript above, I'm navigating from within a click handler.</p>
  
  <p>My form component: </p>
  
  <pre><code>import { Component, NgZone, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { UserService } from '../../shared/services/user.service';
  import { PaymentService } from '../../shared/services/payment.service';
  import { NgxSpinnerService } from 'ngx-spinner';
  import * as moment from 'moment';
  
  @Component({
      templateUrl: 'stripe-form.component.html',
      styleUrls: ['stripe-form.component.css']
  })
  
  export class StripeFormComponent implements OnInit {
  
      Stripe: any;
      model: any = {};
  
     message: string | undefined = undefined;
     errorMessage: string | undefined = undefined;
  
     selectedPlan: StripePlan | undefined;
     submitted: boolean = false;
     valuesMonth: any[];
     valuesYear: any[];
  
    constructor(private paymentService: PaymentService, private _zone: NgZone, private _router: Router, private _userService: UserService, private spinner: NgxSpinnerService) {
        this.Stripe = ( &lt; any &gt; window).Stripe;
    }
  
    ngOnInit() {
         this.selectedPlan = this.paymentService.getSelectedPlan();
    }
  </code></pre>
  
  <p>Router output:</p>
  
  <pre><code>&gt; VM41 vendor.js:66038 Router Event: NavigationStart
  &gt; VM41 vendor.js:66033 NavigationStart(id: 2, url: '/plans')
  VM41 vendor.js:66033 NavigationStart {id: 2, url: "/plans", navigationTrigger: "imperative", restoredState: null}
  VM41 vendor.js:66038 Router Event: RoutesRecognized
  VM41 vendor.js:66033 RoutesRecognized(id: 2, url: '/plans', urlAfterRedirects: '/plans', state: Route(url:'', path:'') { Route(url:'plans', path:'plans') } )
  VM41 vendor.js:66033 RoutesRecognized {id: 2, url: "/plans", urlAfterRedirects: "/plans", state: RouterStateSnapshot}
  VM41 vendor.js:66038 Router Event: GuardsCheckStart
  VM41 vendor.js:66033 GuardsCheckStart(id: 2, url: '/plans', urlAfterRedirects: '/plans', state: Route(url:'', path:'') { Route(url:'plans', path:'plans') } )
  VM41 vendor.js:66033 GuardsCheckStart {id: 2, url: "/plans", urlAfterRedirects: "/plans", state: RouterStateSnapshot}
  VM41 vendor.js:66038 Router Event: ChildActivationStart
  VM41 vendor.js:66033 ChildActivationStart(path: '')
  VM41 vendor.js:66033 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
  VM41 vendor.js:66038 Router Event: ActivationStart
  VM41 vendor.js:66033 ActivationStart(path: 'plans')
  VM41 vendor.js:66033 ActivationStart {snapshot: ActivatedRouteSnapshot}
  VM41 vendor.js:66038 Router Event: GuardsCheckEnd
  VM41 vendor.js:66033 GuardsCheckEnd(id: 2, url: '/plans', urlAfterRedirects: '/plans', state: Route(url:'', path:'') { Route(url:'plans', path:'plans') } , shouldActivate: true)
  VM41 vendor.js:66033 GuardsCheckEnd {id: 2, url: "/plans", urlAfterRedirects: "/plans", state: RouterStateSnapshot, shouldActivate: true}
  VM41 vendor.js:66038 Router Event: ResolveStart
  VM41 vendor.js:66033 ResolveStart(id: 2, url: '/plans', urlAfterRedirects: '/plans', state: Route(url:'', path:'') { Route(url:'plans', path:'plans') } )
  VM41 vendor.js:66033 ResolveStart {id: 2, url: "/plans", urlAfterRedirects: "/plans", state: RouterStateSnapshot}
  VM41 vendor.js:66038 Router Event: ResolveEnd
  VM41 vendor.js:66033 ResolveEnd(id: 2, url: '/plans', urlAfterRedirects: '/plans', state: Route(url:'', path:'') { Route(url:'plans', path:'plans') } )
  VM41 vendor.js:66033 ResolveEnd {id: 2, url: "/plans", urlAfterRedirects: "/plans", state: RouterStateSnapshot}
  VM41 vendor.js:66038 Router Event: ActivationEnd
  VM41 vendor.js:66033 ActivationEnd(path: 'plans')
  VM41 vendor.js:66033 ActivationEnd {snapshot: ActivatedRouteSnapshot}
  VM41 vendor.js:66038 Router Event: ChildActivationEnd
  VM41 vendor.js:66033 ChildActivationEnd(path: '')
  VM41 vendor.js:66033 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
  VM41 vendor.js:66038 Router Event: NavigationEnd
  VM41 vendor.js:66033 NavigationEnd(id: 2, url: '/plans', urlAfterRedirects: '/plans')
  vendor.js:66033 NavigationEnd {id: 2, url: "/plans", urlAfterRedirects: "/plans"}
  vendor.js:66038 Router Event: Scroll
  vendor.js:66033 Scroll(anchor: 'null', position: 'null')
  vendor.js:66033 Scroll {routerEvent: NavigationEnd, position: null, anchor: null}
  vendor.js:66038 Router Event: NavigationStart
  vendor.js:66033 NavigationStart(id: 3, url: '/pay')
  vendor.js:66033 NavigationStart {id: 3, url: "/pay", navigationTrigger: "imperative", restoredState: null}
  vendor.js:66038 Router Event: RoutesRecognized
  vendor.js:66033 RoutesRecognized(id: 3, url: '/pay', urlAfterRedirects: '/pay', state: Route(url:'', path:'') { Route(url:'pay', path:'pay') } )
  vendor.js:66033 RoutesRecognized {id: 3, url: "/pay", urlAfterRedirects: "/pay", state: RouterStateSnapshot}
  vendor.js:66038 Router Event: GuardsCheckStart
  vendor.js:66033 GuardsCheckStart(id: 3, url: '/pay', urlAfterRedirects: '/pay', state: Route(url:'', path:'') { Route(url:'pay', path:'pay') } )
  vendor.js:66033 GuardsCheckStart {id: 3, url: "/pay", urlAfterRedirects: "/pay", state: RouterStateSnapshot}
  vendor.js:66038 Router Event: ChildActivationStart
  vendor.js:66033 ChildActivationStart(path: '')
  vendor.js:66033 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
  vendor.js:66038 Router Event: ActivationStart
  vendor.js:66033 ActivationStart(path: 'pay')
  vendor.js:66033 ActivationStart {snapshot: ActivatedRouteSnapshot}
  vendor.js:66038 Router Event: GuardsCheckEnd
  vendor.js:66033 GuardsCheckEnd(id: 3, url: '/pay', urlAfterRedirects: '/pay', state: Route(url:'', path:'') { Route(url:'pay', path:'pay') } , shouldActivate: true)
  vendor.js:66033 GuardsCheckEnd {id: 3, url: "/pay", urlAfterRedirects: "/pay", state: RouterStateSnapshot, shouldActivate: true}
  vendor.js:66038 Router Event: ResolveStart
  vendor.js:66033 ResolveStart(id: 3, url: '/pay', urlAfterRedirects: '/pay', state: Route(url:'', path:'') { Route(url:'pay', path:'pay') } )
  vendor.js:66033 ResolveStart {id: 3, url: "/pay", urlAfterRedirects: "/pay", state: RouterStateSnapshot}
  vendor.js:66038 Router Event: ResolveEnd
  vendor.js:66033 ResolveEnd(id: 3, url: '/pay', urlAfterRedirects: '/pay', state: Route(url:'', path:'') { Route(url:'pay', path:'pay') } )
  vendor.js:66033 ResolveEnd {id: 3, url: "/pay", urlAfterRedirects: "/pay", state: RouterStateSnapshot}
  vendor.js:66038 Router Event: ActivationEnd
  vendor.js:66033 ActivationEnd(path: 'pay')
  vendor.js:66033 ActivationEnd {snapshot: ActivatedRouteSnapshot}
  vendor.js:66038 Router Event: ChildActivationEnd
  vendor.js:66033 ChildActivationEnd(path: '')
  vendor.js:66033 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
  vendor.js:66038 Router Event: NavigationEnd
  vendor.js:66033 NavigationEnd(id: 3, url: '/pay', urlAfterRedirects: '/pay')
  vendor.js:66033 NavigationEnd {id: 3, url: "/pay", urlAfterRedirects: "/pay"}
  vendor.js:66038 Router Event: Scroll
  vendor.js:66033 Scroll(anchor: 'null', position: 'null')
  vendor.js:66033 Scroll {routerEvent: NavigationEnd, position: null, anchor: null}
  Navigated to https://localhost:5001/
  platform-browser.js:216 Router Event: NavigationStart
  platform-browser.js:211 NavigationStart(id: 1, url: '/')
  platform-browser.js:211 NavigationStart {id: 1, url: "/", navigationTrigger: "imperative", restoredState: null}
  core.js:15702 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
  platform-browser.js:216 Router Event: RoutesRecognized
  platform-browser.js:211 RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )
  platform-browser.js:211 RoutesRecognized {id: 1, url: "/", urlAfterRedirects: "/home", state: RouterStateSnapshot}
  platform-browser.js:216 Router Event: GuardsCheckStart
  platform-browser.js:211 GuardsCheckStart(id: 1, url: '/', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )
  platform-browser.js:211 GuardsCheckStart {id: 1, url: "/", urlAfterRedirects: "/home", state: RouterStateSnapshot}
  platform-browser.js:216 Router Event: ChildActivationStart
  platform-browser.js:211 ChildActivationStart(path: '')
  platform-browser.js:211 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
  platform-browser.js:216 Router Event: ActivationStart
  platform-browser.js:211 ActivationStart(path: 'home')
  platform-browser.js:211 ActivationStart {snapshot: ActivatedRouteSnapshot}
  platform-browser.js:216 Router Event: GuardsCheckEnd
  platform-browser.js:211 GuardsCheckEnd(id: 1, url: '/', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } , shouldActivate: true)
  platform-browser.js:211 GuardsCheckEnd {id: 1, url: "/", urlAfterRedirects: "/home", state: RouterStateSnapshot, shouldActivate: true}
  platform-browser.js:216 Router Event: ResolveStart
  platform-browser.js:211 ResolveStart(id: 1, url: '/', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )
  platform-browser.js:211 ResolveStart {id: 1, url: "/", urlAfterRedirects: "/home", state: RouterStateSnapshot}
  platform-browser.js:216 Router Event: ResolveEnd
  platform-browser.js:211 ResolveEnd(id: 1, url: '/', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'home', path:'home') } )
  platform-browser.js:211 ResolveEnd {id: 1, url: "/", urlAfterRedirects: "/home", state: RouterStateSnapshot}
  platform-browser.js:216 Router Event: ActivationEnd
  platform-browser.js:211 ActivationEnd(path: 'home')
  platform-browser.js:211 ActivationEnd {snapshot: ActivatedRouteSnapshot}
  platform-browser.js:216 Router Event: ChildActivationEnd
  platform-browser.js:211 ChildActivationEnd(path: '')
  platform-browser.js:211 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
  platform-browser.js:216 Router Event: NavigationEnd
  platform-browser.js:211 NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/home')
  platform-browser.js:211 NavigationEnd {id: 1, url: "/", urlAfterRedirects: "/home"}
  platform-browser.js:216 Router Event: Scroll
  platform-browser.js:211 Scroll(anchor: 'null', position: 'null')
  platform-browser.js:211 Scroll {routerEvent: NavigationEnd, position: null, anchor: null}
  </code></pre>
  
  <p>Also, nothing unusual shows up in the route output except for the "Navigated to <a href="https://localhost:5001/" rel="nofollow noreferrer">https://localhost:5001/</a>".</p>
  
  <p>I'd appreciate any help. This is really confusing me. </p>