RouterOutlet malfunction with Navbar - html

Question

I'm not entirely sure what is going on here. I have a navbar like so:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div>
<a class="navbar-brand" [routerLink]="['/dashboard']">Haipe</a>
</div>
<ul class="nav navbar-nav">
<li><a [routerLink]="['/dashboard']">Home</a></li>
<li><a [routerLink]="['/events']">Events</a></li>
<li><a [routerLink]="['/add-event']">Add Event</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a (click)="logout()" >Logout</a></li>
</ul>
</div>
</nav>
The Dashboard component has the navBar and the routerOutlet. However, when I click the link it doesn't place the contents of the component under the navBar, which should be the default behavior of the router element. It is sending me to a whole different page.
These are the routes that I have defined. Below is the app.Module.ts file which has all of my routes:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { LoginFormComponent } from './components/login-form/login-form.component';
import { FooterComponent } from './components/footer/footer.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import {RouterModule,Routes} from '#angular/router';
import {Router} from '#angular/router';
import { Route } from '#angular/compiler/src/core';
//Firebase configuration
import {AngularFireModule} from 'angularfire2';
import {environment} from '../environments/environment';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import {AngularFireAuthModule} from 'angularfire2/auth';
//Forms
import {FormsModule} from '#angular/forms';
//All Components
import { EventsComponent } from './components/events/events.component';
import { EventDetailsComponent } from './components/event-details/event-details.component';
import { AddEventComponent } from './components/add-event/add-event.component';
import { EditEventComponent } from './components/edit-event/edit-event.component';
import { DeleteEventComponent } from './components/delete-event/delete-event.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { Component } from '#angular/core/src/metadata/directives';
const appRoutes:Routes = [
{
path: 'login',
component: LoginFormComponent
},{
path: 'dashboard',
component: DashboardComponent
},{
path: 'events',
component: EventsComponent
},{
path: 'add-event',
component: AddEventComponent
},{
path: 'edit-event/:id',
component: EditEventComponent
},{
path: 'delete-event/:id',
component: DeleteEventComponent
},{
path: 'event-details',
component: EventDetailsComponent
}
]
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
LoginFormComponent,
FooterComponent,
DashboardComponent,
EventsComponent,
EventDetailsComponent,
AddEventComponent,
EditEventComponent,
DeleteEventComponent,
NavbarComponent
],
imports: [
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(environment.firebase),AngularFirestoreModule,AngularFireAuthModule,
BrowserModule,FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Forgot to include DashBoard component
<app-navbar></app-navbar>
<router-outlet></router-outlet>