Angular 2 路由器导航未定义

Question

每次点击 link 并加载新组件时，都会抛出以下错误。

zone 显示的行 responsive-height.component.ts:111 是错误的，那里没有 http 连接。

在以前的angular版本中，这只发生在构建文件中，而不是在开发环境中，但是直到 2.2，它也会在开发模式中发生。

不知道是angular2-router还是angular-cli的问题

目前我使用 angular 2.3.1 和 angular-cli@1.0.0-beta.26.

有什么想法吗？

更新： 我的路由在那里，我把中间几个一样的删掉，foo bar改一些域名。

const routes: Routes = [
  {
    path: '',
    component: Component1,
    pathMatch: 'full'
  },
  {
    path: 'foo/bar',
    component: Component2
  },
  {
    path: 'user/profile',
    component: ProfileComponent
  },
  {
    path: '404',
    component: NotFoundComponent
  },
  {
    path: '**',
    redirectTo: '404',
    pathMatch: 'full'
  }
];

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

更新 2： 应用程序正常工作，没有奇怪的行为。但是抛出这个错误，我想修复它。

更新 3：

app.module:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ErrorModule,
    HeaderModule,
    HttpModule,
    SharedModule,
    RoutingModule,
    UserModule
  ],
  providers: [
    {
      provide: LOCALE_ID,
      useValue: window.navigator.userLanguage || window.navigator.language
    },
    {provide: RequestOptions, useClass: DefaultRequestOptions},
    {provide: ConnectionBackend, useClass: XHRBackend},
    {provide: Http, useExisting: HttpInterceptor},
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 1

对于没有children或redirect的空路径路由，你需要pathMatch: 'full':

  {
    path: '',
    component: Component1,
    pathMatch: 'full'
  },

否则路由器一直在寻找子路由。

Answer 2

缺少组件声明或导入路径错误

declarations: [
    AppComponent,
    Component1,
    Component2
    ...    
  ]

检查你的路径。提供 plunker with your code

app.routes.ts:

const routes: Routes = [
  {
    path: '',
    component: HeaderComponent
  },
  {
    path: 'shared',
    component: SharedComponent
  },
  {
    path: '**',
    redirectTo: '404'
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class RoutingModule {
}

shared.module.ts 类似于 header.module.ts

@NgModule({
  imports: [
    CommonModule    
  ],
  declarations: [SharedComponent]
})
export class SharedModule { }

路由没有错误。

Answer 3

我发现错误，css 文件中的 background-image: none 导致该错误。

Angular 2 路由器导航未定义

Angular 2 router navigates undefined

angular2-routing

angular2-router3

angular