Currently, my Angular project consists of four components: home, portfolio, contact, and about. While I can navigate from the home page to any other component using the nav-bar, I am restricted to navigating only back to the home page when on any other page.
https://i.sstatic.net/xZks9.png
The image provided illustrates the issue when attempting to navigate to the about router-link from a component other than the home page, which is located in the app-component.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
const routes: Routes = [
{ path: '' , component: HomeComponent },
{ path: 'portfolio', component: PortfolioComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
This is the content of my app-routing.module.ts file.
<nav class="navbar navbar-expand navbar-trans">
<div class="container">
<a class="navbar-brand" href="#">
<img height="250" src="assets/Kaan-Logo-PNG.png" alt="logo">
</a>
<div class="pull-xs-right justify-content-end" id="navbarToggler-1">
<ul class="nav navbar-nav mt-2 mt-md-0">
<li class="nav-item active">
<a class="nav-link" routerLink="">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
This section showcases the content within my portfolio.component.html file.