带有 2.0.0-rc.5 的 NgModule 路由 Angular2 显示错误未处理的承诺拒绝错误：无法匹配任何路由：''(...)

Question

我在 angular2, 2.0.0-rc.5 中使用 NgModule，但我收到错误 shim.js:4035 Unhandled Promise Rejection Error: Cannot match any routes: ''(...).我该如何解决这个错误。请帮助我这是我的代码。

app/base/app.component.html

<router-outlet></router-outlet>

app/base/app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { EventService } from '../shared/service/event-service';

@Component({
    moduleId: module.id,
    selector: 'owb-workbench-app',
    templateUrl: 'app.component.html',
    providers: [EventService],
    directives: [ROUTER_DIRECTIVES]
 })

export class AppComponent {
}

app/base/app.module.ts

import { provide } from '@angular/core';
import {CommonModule, APP_BASE_HREF} from "@angular/common";
import { disableDeprecatedForms, provideForms } from '@angular/forms/index';
import { enableProdMode } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { HTTP_PROVIDERS, HttpModule } from '@angular/http';
import { HttpClient } from '../shared/http/base.http';
import { EventService } from '../shared/service/event-service';

import { routing } from './app.routes';
import { DashboardComponent } from '../dashboard/dashboard.component'
import { appRoutingProviders } from './app.routes'
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }   from './app.component';
import { NKDatetime } from 'ng2-datetime/ng2-datetime';

@NgModule({
      imports:      [ BrowserModule, FormsModule,HttpModule,CommonModule,routing,appRoutingProviders],
      declarations: [ AppComponent, NKDatetime,DashboardComponent],
      exports: [NKDatetime],
      bootstrap:    [ AppComponent ],
      providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy },
                  { provide: APP_BASE_HREF, useValue: '<%= APP_BASE %>' },
                  HTTP_PROVIDERS,EventService,HttpClient]
    })
    export class AppModule { 
    }

app/base/app.routes.ts

    import { provideRouter, RouterConfig,RouterModule,Routes } from '@angular/router';
    import { ModuleWithProviders } from '@angular/core';
    import { DashboardRoutes } from '../dashboard/index';

export const routes: RouterConfig = [
    ...DashboardRoutes
];

export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

app/base/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app/dashboard/dashboard.component.html

<h1>Hello World Welcome</h1>

app/dashboard/dashboard.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TopNavComponent } from '../shared/topnav/topnav';
import { SidebarComponent } from '../shared/sidebar/sidebar';
import { RightNavComponent } from '../shared/rightnav/rightnav';

@Component({
    moduleId: module.id,
    selector: 'dashboard-app',
    templateUrl: 'dashboard.component.html',
    directives: [ ROUTER_DIRECTIVES, TopNavComponent, SidebarComponent, RightNavComponent ]
})

export class DashboardComponent {}

app/dashboard/dashboard.routes.ts

import { DashboardComponent } from './index';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GridViewComponent } from './+gridview/gridview.component'

 const appRoutes: Routes = [
  { 
      path: 'dashboard', 
      component: DashboardComponent
  }

];

export const appRoutingProviders: any[] = [

];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app/dashboard/index.ts

/** * 此桶文件提供延迟加载的 DashboardComponent 的导出。 */

export * from './dashboard.component';
export * from './dashboard.routes';

Answer 1

你必须像这样将你的路由导入到 app.module.ts 中。我相信您还需要提供一条空路线。在这种情况下，home 是我的默认路由，如果这是您的默认路由，您可以将其更改为仪表板。

export const appRoutes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full'  },
    { path: 'home',  loadChildren: './app/home/home.module#HomeModule' },
];

export const appRoutingProviders: any[] = [];

我的 app.module.ts（注意 RouterModule.forRoot(appRoutes) 导入）：

@NgModule({
    imports: [ BrowserModule, RouterModule.forRoot(appRoutes), SharedModule.forRoot() ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    providers: [ appRoutingProviders ]

}) 

export class AppModule {}