Angular 2 辅助路由（当存在嵌套模块时）

Question

我很难找到解决方案。我一直在寻找答案，但运气不佳。示例中的所有内容都直接来自根组件，并且非常简单。所以这是我的问题。

我将绘制我的模块图，以便更好地理解。

以下是模块路由：

AppModule

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule }   from '@angular/router';
import { ErrorComponent } from './components/error.component';

import {mainFrameRoutes} from './components/main-frame/main-frame.routing';

const appRoutes: Routes = [ 
  { path: '', redirectTo : 'login', pathMatch: 'full'}
, { path: 'login', loadChildren: 'app/components/login/login.module#LoginModule'}
,  ...mainFrameRoutes
//, { path: 'main-frame', loadChildren: 'app/components/main-frame/main-frame.module#MainFrameModule'}
,{ path: '**', component:ErrorComponent}
];

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

主机模块

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule }   from '@angular/router';
import { MainFrameComponent } from './main-frame.component';
import { DashboardNavComponent } from './dashboard-nav.component';
import { HomeComponent } from '../home/home.component';

import { ProductsComponent } from '../products/products.component';
import { ErrorComponent } from '../error.component';



export const mainFrameRoutes:Routes = [
  { path: 'main-frame', component : MainFrameComponent,
      children : [
       { path:'', redirectTo : '/main-frame/home',pathMatch:'full'}
      ,{ path:'home', component : HomeComponent}
      ,{ path: 'products',component:ProductsComponent,loadChildren :'app/components/products/products.module#ProductsModule'}
      ,{ path:'account', loadChildren : 'app/components/account/account.module#AccountModule'}
      ,{ path:'billing', loadChildren : 'app/components/billing/billing.module#BillingModule'}
      ,{ path:'affiliate',loadChildren : 'app/components/affiliate/affiliate.module#AffiliateModule'} 
      ]
  }
  ,{path: "**", component: ErrorComponent}
];


export const mainFrameRouting: ModuleWithProviders = RouterModule.forChild(mainFrameRoutes);      

计费模块

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule }   from '@angular/router';

import { BillingComponent } from './billing.component';
import { BillingCreditHistoryComponent } from './billing-credit-history.component';
import { BillingAddNewComponent } from './billing-add-new.component';
import { BillingAddNewSidebarComponent } from './add-new-sidebar.component';


const billingRoutes: Routes = [
    { path: '', component: BillingComponent, 
        children: [
            { path: '', redirectTo : 'new', pathMatch : 'full'}
           ,{ path: 'history', component: BillingCreditHistoryComponent}
           ,{ path: 'new', component: BillingAddNewComponent}
           ,{ path: 'new-sidebar', component: BillingAddNewSidebarComponent, outlet:'sidebar'}
        ]}
];


export const billingRouting: ModuleWithProviders = RouterModule.forChild(billingRoutes);      

因此，我尝试导航到 BillingModule 并渲染两个框架（MainFrameModule）、主要计费内容和侧边栏内容。像这样：
localhost:3000/main-frame/billing/new(sidebar:new-sidebar)
我收到的错误是：

Error: Uncaught (in promise): Error: Cannot match any routes: 'new-sidebar'

这是我试图在其中放置该内容的模板：

计费组件模板：

Error: Uncaught (in promise): Error: Cannot match any routes: 'new-sidebar'

我在这方面挣扎了太多时间。如果可以的话请帮助我。