Angular 2：routerLink无法解析

我正在学习Angular 2中的路由,并且在单击链接时自定义段不会附加到URL,也不会加载组件.

手动在段中输入地址栏确实有效,组件加载到< router-outlet>< / router-outlet>但不是这样,我希望它按预期工作 – 通过单击routerLink指令内的链接.

我跟着路由器documentation并且仍然有不良结果.

这是一个非常相似的question,但是到目前为止还找不到对我有用的解决方案.

我遇到的两个常见解决方案是：

>拼错’routerLink’,区分大小写
>没有< base href ='/'>在index.html的顶部

Chrome中的控制台窗口也没有错误

所以在继续之前我只想取消明显的解决方案.

这是我为配置自定义路由器所做的工作：

1.配置自定义路由(routes.ts)

import { Routes,RouterModule } from '@angular/router';
import { RecipesComponent } from './recipes/recipes.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';

//TODO Fix routing bug (not switching on click or displaying in URL)
export const APP_ROUTES: Routes = [
    {path: '',redirectTo: 'recipes',pathMatch: 'full'},{path: 'recipes',component: RecipesComponent},{path: 'shopping-list',component: ShoppingListComponent}
];

/*Set routing up for root of app*/
export const routing = RouterModule.forRoot(APP_ROUTES);

2.全球导入路线(app.module.ts)

import { routing } from './routes';//Custom routes file

    @NgModule({                     
      // Declarations removed for bravity
      imports: [
        BrowserModule,FormsModule,HttpModule,routing
      ],providers: [ShoppingListService],bootstrap: [AppComponent,]
    })
    export class AppModule { }

3.提供RouterOutlet指令(app.component.html)

<rb-header></rb-header>
<div class="container">
  <router-outlet></router-outlet>
</div>

4.使用静态段实现routerLink(header.component.html)

<ul class="nav navbar-nav">
    <li><a routerLink="/recipes">Recipes</a></li>
    <li><a routerLink="/shopping-list">Shopping List</a></li>
</ul>

路由器documentation表示使用routerLink用于静态段,[routerLink]用于使用params传递.我尝试了两种方法,但它们仍然会产生相同的结果.