title: How to add ngModule routes as child routes of another ngModule in Angular2?
body: <p>I am following this <a href="https://angular.io/docs/ts/latest/guide/router.html" rel="noreferrer">tutorial</a> to have an architecture of my application. </p>
  
  <p>To give more information lets consider <code>A</code> as appModule, and <code>B</code> is another main module. Now I want to load other modules (<code>NgModule</code> which has many other routes) inside B's <code>&lt;router-outlet&gt;</code>.</p>
  
  <p>What is a better approach to do this?</p>
  
  <p><a href="https://i.stack.imgur.com/3hqmj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3hqmj.png" alt="This is what I want to achieve"></a></p>
  
  <p>This is what I have done so far</p>
  
  <pre><code>-mainBoard (Folder next to app.Module)
      --mainBoard Routes
      --mainBoard Component
      --mainHeader Component
      --mainFooter Component
      --mainSidenav Component
  
      -Users  (Folder inside mainBoard)
      --User Module
      --User Routes
      --UserList Component
      --UserDetail Component
      --UserSetting Component
  
      -Departments (Folder inside mainBoard)
      --Department Module
      --Department Routes
      --DepartmentList Component
      --DepartmentDetail Component
  
  -Auth (Folder next to mainBoard folder)
      --Auth Module
      --Auth Component
      --Auth Routes
      -Sign-in (Folder)
      --Sign-in Component
      -Sign-up (Folder)
      --Sign-up Component
  
  -App Module
  </code></pre>
  
  <p>I have 2 main modules, mainBoard and Auth.
  MainBoard has a header, sidenav,footer and in the center I want to load Users and Department using <code>&lt;router-outlet&gt;</code>.</p>
  
  <p>I want to load <code>localhost/app/users</code> to load Userslist and <code>localhost/app/department</code> to load department list.</p>
  
  <p>My main-board.module and users.module look like this</p>
  
  <pre><code>// main-board.module.ts
  import {MainBoardRouting} from './main-board.routes';
  
  import {UsersModule} from './users/users.module';
  import {DepartmentsModule} from './departments/departments.module';
  
  @NgModule({
      imports :[
          MainBoardRouting,
          UsersModule,
          DepartmentsModule
      ],
      declarations : [
          MainBoardComponent,
          MainHeaderComponent,
          MainFooterComponent,
          MainSidenavComponent
      ],
      providers: []
  })
  export class MainBoardModule{}
  </code></pre>
  
  <p>// Users.module.ts</p>
  
  <pre><code>import {NgModule} from '@angular/core';
  
  import {usersRouting} from './users.routes';
  import {UserListComponent} from './user-list';
  import {UserDetailComponent} from './user-detail';
  
  @NgModule({
      imports :[
          usersRouting
      ],
      declarations : [
          UserListComponent,
          UserDetailComponent
      ],
      providers: []
  })
  export class UsersModule{}
  </code></pre>
  
  <p>// main-board.routes</p>
  
  <pre><code>import { RouterModule,Routes } from '@angular/router';
  
  import {  MainBoardComponent  } from './main-board.component';
  
  const MainBoardRoutes: Routes = [{
      path: 'app',
      component: MainBoardComponent
  }];
  export const MainBoardRouting = RouterModule.forChild(MainBoardRoutes);
  </code></pre>
  
  <p>// users route</p>
  
  <pre><code>import { Routes, RouterModule } from '@angular/router';
  
  import { UserListComponent }    from './user-list';
  import { UserDetailComponent }  from './user-detail';
  
  export const usersRoutes: Routes = [
    {path: '', redirectTo: 'app/users', pathMatch:'full'},
    { path: 'users',  component: UserListComponent },
    { path: 'user/:id', component: UserDetailComponent }
  ];
  
  export const usersRouting = RouterModule.forChild(usersRoutes);
  </code></pre>
  
  <p>Is my approach right to have child NgModule with their own routings or do I have to change them to simple component and have all the routes in <code>main-board</code> Module routes?</p>