Angular 2 aux路由（当有嵌套模块时）

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);

MainFrameModule

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);      

的 BillingModule

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（侧边栏：新边栏）
我得到的错误是：

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

这是我试图放置内容的模板：

BillingComponent模板：

 <div class="page__content-inner">
    
     <div class="page__main-col">
               
                <router-outlet></router-outlet>
     </div>

     <router-outlet name="sidebar"></router-outlet>
</div>

我正在努力解决这个问题。如果可以，请帮助我。