Angular 2 aux routes (with nested modules)

Question

Angular 2 aux routes (with nested modules)

I find it difficult to work on a solution. I was looking for answers, but not very lucky. Everything with examples directly from the root component and quite simple. So here is my problem.

I am drawing a diagram of my modules to better understand.

And here are the module routes:

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

Run code Hide result

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

Run code Hide result

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

Run code Hide result

Therefore, I am trying to go to the BillingModule and display both the frame (MainFrameModule), the main content for billing, and the contents of the sidebar. Example:
localhost: 3000 / main-frame / billing / new (sidebar: new sidebar) The
error I get is:

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

And this is the template in which I am trying to post this content:

BillingComponent Template:

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

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