Question

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

angular js version：“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步：我的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 }
];

使用斜杠，您可能会收到错误（“路径无法以斜杠开头......”）。

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

1 个答案: