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

Question

添加路由器后未加载AngularJS2应用组件。日志中没有错误。如果我删除路由器，它会重新开始工作。有没有人遇到过这种问题。我正在使用'lite-server'来运行应用程序。

角JS版本： “2.4.0”，
路由器版本： “3.4.8〜”，
精简版，服务器版： “^ 2.2.2”，

这是怎么了我添加路由器到我的应用程序。

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

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

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

步骤3：我的router.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 } 
]; 

用斜杠，你可能会得到一个错误（“路径不能以斜线开始...”）。