Angular 2路由器导航未定义

Question

每次单击链接并加载新组件时，都会引发以下错误。

该区域显示的行像responsive-height.component.ts：111错误，那里没有http连接。

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

我不知道问题是否与angular2-router或angular-cli有关。

目前我使用angular 2.3.1 with 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： aplicación工作正常，没有奇怪的行为。但是这个错误被抛出了，我想解决它。

更新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

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

Answer 3

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

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 { }

路线没有错误。