I recently started developing my first angular app and I have encountered an issue with navigating on my page using routerLink. The welcome component loads up fine, but when I click on a routerLink, it redirects me to a blank page.
import { Component } from "@angular/core";
@Component({
selector: 'pm-root',
template: `<nav class="navbar navbar-expand navbar-light bg-light">
<a class="navbar-brand">{{pageTitle}}</a>
<ul class='nav nav-pills'>
<li><a class="nav-link" routerLink='/welcome' routerLinkActive="active">Home</a></li>
<li><a class="nav-link" routerLink='/products' routerLinkActive="active">Product list</a></li>
</ul>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>`
})
export class AppComponent {
pageTitle: string = 'Acme Project Mangement';
}
The structure of my app.module.ts file is as follows:
@NgModule({
declarations: [
AppComponent,
ProductList,
ConvertToSpacesPipe,
starComponent,
ProductDetailComponent,
WelcomeComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RouterModule.forRoot([
{path: 'products', component: ProductListComponent},
{path: 'products/:id', component: ProductDetailComponent},
{path: 'welcome', component: WelcomeComponent},
{path: '', redirectTo: '/welcome', pathMatch: 'full'},
{path: '**', redirectTo: 'welcome', pathMatch: 'full'}
])
],
bootstrap: [AppComponent]
})
export class AppModule { }
Despite not being able to identify any errors in my code and not receiving any compiler errors, I am unable to proceed with my angular project. Any assistance or guidance would be greatly appreciated.