angularangular-routingangular-routerangular-routerlink

routerLink doesn't rendered into my Angular app, why?

I am working on an Angular application trying to introducing routing.

Into my app.component.html page I have this:

<h1>My cool app</h1>
<a routerLink="/"></a>
<a routerLink="/products"></a>
<router-outlet></router-outlet>

the problem is that into my page the router links are not rendered at all !!!

Routing seems to be correctly configured into my application. The app.module.ts file contains the AppRoutingModule defined into the imports:

@NgModule({
  declarations: [
    AppComponent,
    ProductsComponent,
    ProductComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [ProductsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

and this is the app.routing.module.ts file content:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductsComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

What is wrong? What am I missing? How can I try to fix it?

Solution

  • The anchor need something to anchor on

    <a routerLink="/">Home</a>
<a routerLink="/products">Products</a>