添加路由器后，AngularJS2组件未加载

Question

angularjs2应用程序组件在添加路由器后未加载。日志中没有错误。如果我卸下路由器，它将再次开始工作。以前有人遇到过这种问题吗？我正在使用" Lite-Server"运行该应用程序。

Angular JS版本：" 2.4.0"，
路由器版本：" 〜3.4.8"，
Lite-Server版本："^2.2.2"，

这就是我将路由器添加到我的应用中的方式。

步骤1：将' <base href="/">'添加到index.html

步骤2：添加了路由器链接到我的component.html

  <nav>
    <a routerLink="/new">Contacts</a> 
  </nav>
  <router-outlet></router-outlet> 

步骤3：我的路由器。TS看起来像

export const routes: Routes = [
      { path: '', component: ContactListComponent },
      { path: '/new', component: NewContactComponent },
      { path: '/about', component: AboutComponent }
];

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

步骤4：在下面的模块中添加了路由组件

@NgModule({
  declarations: [
    AppComponent,
    ContactListComponent,
    ContactComponent,
    NewContactComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [ContactService],
  bootstrap: [AppComponent]
})

也尝试像以下

那样注入路由器

export class AppComponent {
   constructor(private routes: Router) { 
   }
}

那么有人可以告诉我我做错了什么？

Answer 1

尝试没有斜杠（/）：

export const routes: Routes = [
      { path: '', component: ContactListComponent },
      { path: 'new', component: NewContactComponent },
      { path: 'about', component: AboutComponent }
];

用斜杠，您可能会遇到一个错误（"路径不能以斜线开始..."）。