I'm facing an issue with my Angular routing setup. I have two components, "view-emp" and "edit-emp", but only "edit-emp" is accessible for navigation. When I try to click on the link to navigate to "view-emp", nothing happens and I stay on the home screen. However, when I click on the "edit-emp" link, I am successfully navigated to /edit-emp and can see the component.
Here is my app module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ViewEmpComponent } from './view-emp/view-emp.component';
import { EditEmpComponent } from './edit-emp/edit-emp.component';
@NgModule({
declarations: [
AppComponent,
ViewEmpComponent,
EditEmpComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
And here is my app routing module:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ViewEmpComponent } from './view-emp/view-emp.component';
import { EditEmpComponent } from './edit-emp/edit-emp.component';
const routes: Routes = [
{path: 'view-emp', component: ViewEmpComponent},
{path: 'edit-emp', component: EditEmpComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Lastly, here is my app component template:
<p>Hello, welcome to angular routing</p>
<nav>
<ul>
<a routerLink="/view-emp" routerLinkActive="active">View employee</a>
<a routerLink="/edit-emp" routerLinkActive="active">Edit employee</a>
</ul>
</nav>
<router-outlet></router-outlet>