navigate not working

Question

My app doesn't navigate to a new page. When I include <router-outlet></router-outlet> 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.

In shopping-cart.component.ts:

i

mport { 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({
});
}

In app-routing.module.ts

i

mport { 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 { }

In app.module.ts

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){}

shopping-cart.component.html

<form [formGroup]="submitForm" (ngSubmit)="checkOut()">
<input type="submit" value="Check Out">
</form>