Routing Different Angular Components through a Bootstrap Nav Bar

I am trying to navigate to my different components in angular using a nav bar.

First, I created a component for this nav bar called header and wrote the HTML code for the nav bar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">NBA Statistics</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
          <li *ngFor = "let items of menuItems" class="nav-item">
            <a class="nav-link" href="{{items.linkURL}}">{{items.linkName}} <span class="sr-only">(current)</span></a>
          </li>
      </ul>
    </div>
  </nav>

In my header.component.ts, I included an array for the different pages which I referenced in my HTML code above:

import { Component, OnInit } from '@angular/core';

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

  menuItems = [

    {linkId: 1, linkName: 'Search by Player', linkURL: 'home'},
    {linkId: 2, linkName: 'Lab 5', linkURL: 'lab5'},
    {linkId: 3, linkName: 'Lab 6', linkURL: 'lab6'},
    {linkId: 4, linkName: 'Graphs', linkURL: 'graphs'}

  ]
  constructor() { }

  ngOnInit(): void {
  }

}

Then in my app-routing.module.ts, I created routing paths:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GraphsComponent } from './graphs/graphs.component';
import { Lab5Component } from './lab5/lab5.component';
import { MongodbComponent } from './mongodb/mongodb.component';
import { NbaStatsComponent } from './nba-stats/nba-stats.component';

const routes: Routes = [

  {path: 'home', component: NbaStatsComponent},
  {path: 'lab5', component: Lab5Component},
  {path: 'lab6', component: MongodbComponent},
  {path:'graphs', component: GraphsComponent}

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

The nav bar appears properly but when I click on the different links to navigate to that page it says "Cannot GET /home". Am I missing anyother steps in the routing?

>Solution :

You’re not missing a step, but you should be using the routerLink directive instead of the href attribute and your routes should start with a forward slash.

Using href, your browser will try to fetch e.g. /home which doesn’t exist (localhost:4200/home exists because Angular performs the routing for you. There is no static home.html file in the root of your project).

Using routerLink with /home, your browser stays on localhost:4200 and Angular changes the content of the <router-outlet> to the component identified by the home path. Here’s the routing tutorial for more.

Instead of:

<a href="{{items.linkURL}}">{{items.linkName}}</a>

menuItems = [
    {linkId: 1, linkName: 'Search by Player', linkURL: 'home'},
    {linkId: 2, linkName: 'Lab 5', linkURL: 'lab5'},
    {linkId: 3, linkName: 'Lab 6', linkURL: 'lab6'},
    {linkId: 4, linkName: 'Graphs', linkURL: 'graphs'}
];

You want:

<a [routerLink]="[items.linkURL]">{{items.linkName}}</a>

menuItems = [
    {linkId: 1, linkName: 'Search by Player', linkURL: '/home'},
    {linkId: 2, linkName: 'Lab 5', linkURL: '/lab5'},
    {linkId: 3, linkName: 'Lab 6', linkURL: '/lab6'},
    {linkId: 4, linkName: 'Graphs', linkURL: '/graphs'}
];