After spending a considerable amount of time on website development, I have hit a roadblock with the navigation. Whenever I set up a route, the entire user interface disappears and refuses to load. I have searched extensively but found no solution to this issue. Any guidance or assistance would be highly appreciated!
navi.component.html
<nav class="navbar navbar-expand-md navbar-light bg-light bg-gradient shadow rounded">
<div class="container-xxl ">
<a href="#home" class="navbar-brand">
<span class="fw-bold">
207 Tech Services
</span>
</a>
<!-- Toggle button mobile nav -->
<button class="navbar-toggler text-light" type="button" data-bs-toggle="collapse"
data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
<ul class="navbar-nav fw-light">
<li class="nav-item">
<a routerLink="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Portfolio</a>
</li>
</ul>
</div>
</div>
</nav>
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{path: '/home', component: HomeComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }