routerLink 没有呈现到我的 Angular 应用程序中,为什么?

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

我正在开发一个试图引入路由的 Angular 应用程序。

进入我的 app.component.html 页面我有这个:

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

问题是我的页面根本没有呈现路由器链接!!!

路由似乎已正确配置到我的应用程序中。 app.module.ts 文件包含定义到导入中的 AppRoutingModule

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

这是app.routing.module.ts文件内容:

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

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

怎么了?我错过了什么?我该如何修复它?

锚点需要锚点

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