Open the /ClientApp/app/app.module.shared.ts file and add the new references accordingly (new lines highlighted):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { QuizListComponent } from './components/quiz/quiz-list.component';
import { QuizComponent } from './components/quiz/quiz.component';
import { AboutComponent } from './components/about/about.component';
import { LoginComponent } from './components/login/login.component';
import { PageNotFoundComponent } from './components/pagenotfound/pagenotfound.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent,
        QuizListComponent,
        QuizComponent,
        AboutComponent,
        LoginComponent,
        PageNotFoundComponent
    ],
    imports: [
        CommonModule,
        HttpClientModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'quiz/:id', component: QuizComponent },
            { path: 'about', component: AboutComponent },
            { path: 'login', component: LoginComponent },
            { path: '**', component: PageNotFoundComponent }
        ])
    ]
})
export class AppModuleShared {
}

As we can see, we also added the proper routing rules to ensure that these components will actually be reached whenever the user clicks on the related link within the NavMenuComponent. At the moment, though, there are no links in the NavMenuComponent pointing to these components! We almost forgot that, didn't we? Let's fix that.

Open the /ClientApp/app/components/navmenu/navmenu.component.html file and add the following content to the existing template code (new lines are highlighted):

<div class='main-nav'>
    <div class='navbar navbar-inverse'>
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle' data-
              toggle='collapse' data-target='.navbar-collapse'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
            <a class='navbar-brand' [routerLink]="
              ['/home']">TestMakerFree</a>
        </div>
        <div class='clearfix'></div>
        <div class='navbar-collapse collapse'>
            <ul class='nav navbar-nav'>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/home']">
                        <span class='glyphicon glyphicon-home'></span> 
                                           Home
                    </a>
                </li>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/about']">
                        <span class='glyphicon glyphicon-info-sign'>
                            </span> About
                    </a>
                </li>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/login']">
                        <span class='glyphicon glyphicon-log-in'>
                         </span> Login
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

That will do. We also took the opportunity to add some neat icons from the Glyphicon Halflings set, which is freely available for the Bootstrap framework, which is the frontend library shipped with the .NET Core MVC with Angular template we've been using. We'll talk more about it in Chapter 6, Style Sheets and UI Layout.

Before moving ahead, let's spend a moment explaining how we handled the PageNotFoundComponent. For obvious reasons, it can't have a direct link on the NavMenuComponent along with the other existing routes; that won't make any sense, as it's intended to kick in whenever the user ends up with a non-existing route. To properly implement this, we changed the behavior of the global fallback routing rule so that it will load the PageNotFoundComponent instead of redirecting to Home.