This may be a very common `angular` routing problem but, I cannot seem to make it work. I am not sure whether I understand all the concepts clearly even after going through the angular docs. Here's what I want to achieve and what I have tried:

I have a login application. When the user clicks proceed in the login form, I want the application to redirect to a new page/app. To do this:

1. I first tried adding a `RouterModule` to my `@NgModule imports` list in `app.module.ts` file.

`import { RouterModule, Routes } from '@angular/router';`

```
// Routes
const routes: Routes = [
  {path: "", component: InvestigatorLoginComponent},
  {path: 'invdashboard', component: InvDashboardComponent}
];
//...
@NgModule({
// ...
imports: [
// ...
RouterModule.forRoot(
  routes, { enableTracing: true} // <= debugging
),
// ...
})
export class AppModule {}

```

2. Added `<router-outlet></router-outlet>` to `<inv-dashboard>` component:

`app.component.html`

```
<div id='login-app-wrapper'>
  <nav-top></nav-top>
  <investigator-login></investigator-login> 
</div>

```

`inv-dashboard.component.html`

```
<router-outlet></router-outlet>
<p>
  inv-dashboard works!
</p>

```

`inv-dashboard.component.ts`

```
import { RouterOutlet } from '@angular/router'; 

@Component({
  selector: 'inv-dashboard',
  templateUrl: './inv-dashboard.component.html',
  styleUrls: ['./inv-dashboard.component.css']
})
export class InvDashboardComponent implements OnInit { // ... }

```

3. Login component:
`investigator-login.component.html`

```
 <form class='inv-login' [formGroup]="invLoginForm" (ngSubmit)="onSubmit(invLoginForm.value)">

 <mat-form-field class='inv-login-full-width-input'>

 <input matInput placeholder="Username" formControlName="fcUsername" value="" maxlength="30">
 </mat-form-field>

 <mat-form-field class='inv-login-full-width-input'>
 <input matInput placeholder="Password" formControlName="fcPassword" value="" maxlength="25">  
 </mat-form-field>
 <div class='prcd-btn-container'>
    <button mat-button color='primary' type='submit'>Proceed</button>
 </div>
</form>

```

`investigator-login.component.ts`

```
`onSubmit(f: any): void {
    this.authenticator.postContent(f)
      .subscribe(
        this.handleLoginResponse,
        err => { throw new Error('failed'); } 
      );
  }
  handleLoginResponse(res: IResponseSuccess) {
    if(res.status === 200) {
      // success 
      console.log(res.template);
    }
    else {
      console.error('Server error ' + res.status);
    }
  }`

```

When after filling out the form, I click proceed, nothing happens. The stack track shows no redirection. Do I need to add any redirection code to the `proceed` button handler in the form? I am really not sure what else to add. 

Thanks