title: Angular2 router: how to correctly load children modules with their own routing rules
body: <p>here is my Angular2 app structure:</p>
  
  <p><a href="https://i.stack.imgur.com/qj7wv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qj7wv.png" alt="enter image description here"></a></p>
  
  <p>Here is part of my code. The following is the main <code>module</code> of the Angular2 app, that imports its routing rules and a child module (<code>EdgeModule</code>) and uses some components related to some pages.</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>@NgModule({
      declarations: [
          AppComponent,
          PageNotFoundComponent,
          LoginComponent
      ],
      imports: [
          ...
          appRouting,
          EdgeModule
      ],
      providers: [
          appRoutingProviders,
          LoginService
      ],
      bootstrap: [AppComponent]
  })
  
  export class AppModule {
  }
  </code></pre>
  
  <p>Here is the routing rules for the main module. It have paths to login page and page not found.</p>
  
  <p><strong>app.routing.ts</strong></p>
  
  <pre><code>const appRoutes: Routes = [
      { path: 'login', component: LoginComponent },
      { path: '**', component: PageNotFoundComponent }
  ];
  
  export const appRoutingProviders: any[] = [];
  
  export const appRouting = RouterModule.forRoot(appRoutes, { useHash: true });
  </code></pre>
  
  <p>Here is <code>EdgeModule</code> that declares the component that it uses and import its own routing rules and 2 child modules (<code>FirstSectionModule</code> and <code>SecondSectionModule</code>).</p>
  
  <p><strong>edge.module.ts</strong></p>
  
  <pre><code>@NgModule({
      declarations: [
          EdgeComponent,
          SidebarComponent,
          TopbarComponent
      ],
      imports: [
          ...
          edgeRouting,
          FirstSectionModule,
          SecondSectionModule
      ],
      providers: [
          AuthGuard
      ]
  })
  
  export class EdgeModule {
  }
  </code></pre>
  
  <p>Here is the routing rules for the module that loads, as you can see, topbar and sidebar components.</p>
  
  <p><strong>edge.routing.ts</strong></p>
  
  <pre><code>Paths['edgePaths'] = {
      firstSection: 'firstSection',
      secondSection: 'secondSection'
  };
  
  const appRoutes: Routes = [
      { path: '', component: EdgeComponent,
          canActivate: [AuthGuard],
          children: [
              { path: Paths.edgePaths.firstSection, loadChildren: '../somepath/first-section.module#FirstModule' },
              { path: Paths.edgePaths.secondSection, loadChildren: '../someotherpath/second-section.module#SecondModule' },
              { path: '', redirectTo: edgePaths.dashboard, pathMatch: 'full' }
          ]
      }
  ];
  
  export const edgeRouting = RouterModule.forChild(appRoutes);
  </code></pre>
  
  <p>Finally, this is one of the two child module, that have its components and imports its routing rules.</p>
  
  <p><strong>first-section.module.ts</strong></p>
  
  <pre><code>@NgModule({
      declarations: [
          FirstSectionComponent,
          SomeComponent
      ],
      imports: [
          ...
          firstSectionRouting
      ],
      providers: [
          AuthGuard,
      ]
  })
  
  export class FirstSectionModule {
  }
  </code></pre>
  
  <p>These are the routing rules for the pages (components) of <code>FirstSectionModule</code></p>
  
  <p><strong>first-section.routing.ts</strong></p>
  
  <pre><code>Paths['firstSectionPaths'] = {
      someSubPage: 'some-sub-page',
      someOtherSubPage: 'some-other-sub-page'
  };
  
  const appRoutes: Routes = [
      {
          path: '',
          children: [
              { path: Paths.firstSectionPaths.someSubPage, component: someSubPageComponent},
              { path: Paths.firstSectionPaths.someOtherSubPage, component: someOtherSubPageComponent},
              { path: '', component: AnagraficheComponent }
          ]
      }
  ];
  
  export const firstSectionRouting = RouterModule.forChild(appRoutes);
  </code></pre>
  
  <p>Almost the same happens for <code>second-section.module.ts</code> and <code>second-section.routing.ts</code> files.</p>
  
  <p>When i run the app the first things that load is the page related to <code>FirstSectionComponent</code>, with no sidebar nor topbar.</p>
  
  <p>Can you tell me what's wrong with my code? There are not errors in the console.</p>