routerLink in angular sends me to a blank page-CodePudding

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 >
    <a >{{pageTitle}}</a>
    <ul class='nav nav-pills'>
      <li><a  routerLink='/welcome' routerLinkActive="active">Home</a></li>
      <li><a  routerLink='/products' routerLinkActive="active">Product list</a></li>
    </ul>
  </nav>
  <div >
  <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.

CodePudding user response：

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

CodePudding user response：

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