Angular2: how to handle routing for child modules
<p>i'm developing an Angular2 app and i'd like to have this structure:</p>

<ul>
<li>APP ---> Main cointainer ---> First section</li>
<li>APP ---> Main cointainer ---> Second section</li>
<li>APP ---> Main cointainer ---> Third section</li>
</ul>

<p>I would have a module for every level:</p>

<ul>
<li><code>app.module.ts</code></li>
<li><code>main.module.ts</code></li>
<li><code>first-section.module.ts</code></li>
<li><code>second-section.module.ts</code></li>
<li><code>third-section.module.ts</code></li>
</ul>

<p>I tried to create the following files, that represents two levels.</p>

<p><strong>app.module.ts</strong></p>

<pre><code>@NgModule({
    declarations: [
        AppComponent,
        PageNotFoundComponent,
        LoginComponent
    ],
    imports: [
        HttpModule,
        JsonpModule,
        BrowserModule,
        FormsModule,
        MainModule,
        routing,
    ],
    providers: [
        appRoutingProviders,
        LoginService
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}
</code></pre>

<p><strong>app.routing.ts</strong></p>

<pre><code>Paths['appPaths'] = {
    login: 'login',
    pageNotFound: '**'
};

const appPaths = Paths.appPaths;

const appRoutes: Routes = [
    { path: appPaths.login, component: LoginComponent },
    { path: appPaths.pageNotFound, component: PageNotFoundComponent }
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes, { useHash: true });
</code></pre>

<p><strong>main.module.ts</strong></p>

<pre><code>@NgModule({
    declarations: [
        MainComponent,
        SomeDirective
    ],
    imports: [
        MainRouting,
        FormsModule,
        BrowserModule,
        ReactiveFormsModule,
    ],
    providers: [
        SomeService,
        AuthGuard
    ]
})

export class MainModule {
}
</code></pre>

<p><strong>main.routing.ts</strong></p>

<pre><code>Paths['cdcPaths'] = {
    mainBase: ''
    firstPage: 'firstPage',
    secondPage: 'secondPage',
    thirdPage: 'thirdPage',
};

const cdcPaths = Paths.cdcPaths;

const appRoutes: Routes = [
    {
        path: cdcPaths.mainBase, component: MainComponent,
        canActivate: [AuthGuard],
        children: [
            { path: cdcPaths.firstPage, component: firstPageComponent },
            { path: cdcPaths.secondPage, component: secondPageComponent },
            { path: cdcPaths.thirdPage, component: thirdPageComponent },
            { path: '', redirectTo: cdcPaths.firstPage, pathMatch: 'full' }
        ]
    }
];

export const MainRouting = RouterModule.forChild(appRoutes);
</code></pre>

<p><strong>util.ts</strong></p>

<pre><code>export const Paths: any = {};
</code></pre>

<p>Could this be the right approach? As you can see i created even different routing files for every module. Could this be a right way to develop?
At this point... how to create the third level?</p>