routerLink in angular sends me to a blank page

Question

I am developing my first angular app and now when it has come to navigating on my page with routerLink, it does not work. It loads up with the welcome component, but when I click on a routerLink it sends 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';
}

And my app.module.ts looks like this

@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 { }

I can not see any wrong with my code, and the compiler does not throw any error. Please help me so I can go on with angular.

RouterModule.forRoot has a second parameter where you can enable tracing for debugging purposes, e.g. [SO answer](https://stackoverflow.com/questions/45669030/how-to-trace-routing-in-angular-2) — Andrew Allen, Nov 04 '22 at 09:15

score 0 · Accepted Answer · answered Nov 04 '22 at 09:00

0

The selector for pm-root is not declared in the index.html, maybe is a typo most developer uses app-root.

<app-root>loading</app-root>

I copied your code, the only issue was the root component, looks the demo. https://stackblitz.com/edit/angular-ivy-g2bcty?file=src/index.html

answered Nov 04 '22 at 09:00

danywalls

709
1
10
27

I have pm-root declared in index.html, I have tried with changing the selector to app-root and declaring that in index.html. But it did not work. I have checked out your sollution and I see that you have made it work. So, the question is, why does this not work for me. – user2631359 Nov 04 '22 at 11:41
try to push your example to stackblitz, it is the only way to help you. – danywalls Nov 05 '22 at 08:26
https://github.com/usken5000/APM-Start is where I have the code, god bless you. – user2631359 Nov 06 '22 at 10:25

score 0 · Answer 2 · answered Nov 04 '22 at 09:23

Try to also export the RouterModule in app.module.ts

@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]
exports: [
  RouterModule,
],
})
export class AppModule { }

Thank you for your reply, but it did not work. :( – user2631359 Nov 04 '22 at 11:39 — user2631359, Nov 04 '22 at 11:39

routerLink in angular sends me to a blank page

2 Answers2