angular - Angular 2 路由器导航未定义

Question

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

该区域显示的 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：

应用程序模块：

@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对于没有or的空路径路由redirect，您需要pathMatch: 'full'：

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

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

Answer 2

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

Answer 3

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

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

检查你的路径。向plunker 提供您的代码

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

没有错误的路线。