title: navigate and navigateByUrl not navigating to the page
body: <p>My app doesn't navigate to a new page. When I include <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> in my app.component.html, it shows the check-out component so I know that it's routing to the right URL but I want to navigate to a new page, not stay on the same page.</p>
  <p>In shopping-cart.component.ts:</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { Router } from '@angular/router';
  import {ActivatedRoute} from '@angular/router';
  
  @NgModule(
  {
     imports:[
         RouterModule
     ]
  }
  )
  public checkOut(): void {
  
  this.router.navigate(['check-out'], {relativeTo: this.route});
  
  //this.router.navigateByUrl('/check-out/check-out');
  }
  ngOnInit(): void {
  this.submitForm = new FormGroup({ 
  }); 
  }
  </code></pre>
  <p>In app-routing.module.ts</p>
  <pre><code>import { Routes, RouterModule } from '@angular/router';
  import { CheckOutComponent } from './check-out/check-out.component';
  
  const routes: Routes = [
  {
     path: 'check-out',
     component: CheckOutComponent
     }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  
  
  export class AppRoutingModule { }
  </code></pre>
  <p>In app.module.ts</p>
  <pre><code>import { AppRoutingModule } from './app-routing.module';
  import { CheckOutComponent } from './check-out/check-out.component';
  import { RouterModule } from '@angular/router';
  import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
  
  @NgModule({
    declarations: [
      CheckOutComponent,
      ShoppingCartComponent
    ],
    imports: [
       RouterModule,
       AppRoutingModule,
    ]
  })
  export class AppModule { }
  
  
  constructor(public router: Router, private route: ActivatedRoute){}
  </code></pre>
  <p>shopping-cart.component.html</p>
  <pre><code>&lt;form [formGroup]=&quot;submitForm&quot; (ngSubmit)=&quot;checkOut()&quot;&gt;
  &lt;input type=&quot;submit&quot; value=&quot;Check Out&quot;&gt;
  &lt;/form&gt;
  
  </code></pre>