title: Routing submenu elements Angular 2
body: <p>I have a question regarding routing submenu elements in Angular 2. </p>
  
  <p>The directory of my project looks like:</p>
  
  <pre><code>-app  
  ---login  
  ---registration  
  ---mainApp  (this is the main body of the app, with a static content as menu, with few links)
  -----subMenu1  (link to some content)
  -------(some files here)  
  -----subMenu2   (link to some content)
  -------(some files here)  
  -----subMenu3   (link to some content)
  -------(some files here)  
  ---app.component.ts  
  ---app.component.html  
  ---app.module.ts  
  ---app.routing  
  ---index.ts
  </code></pre>
  
  <p>How does it works? First view is the <code>login</code> and there you have two possibilities, to enter the <code>mainApp</code> or enter <code>registration</code> form. It works fine. But now I need to handle the routing between the <code>mainApp</code> and sub items from this mainApp. The <code>mainApp</code> content is just a sidemenu, which doesn't disappear. It is always on screen, only content from sidemenu elements is changing. </p>
  
  <p><strong>What is my problem:</strong></p>
  
  <p>Do I need to provide another routing file to handle the routing between the <code>mainApp</code> static menu elements and the dynamic content? Or am I able to do it just from this file which handles routing between the <code>app</code> and <code>login</code>, <code>registration</code> and <code>mainApp</code>?</p>
  
  <p><strong>And if I have to make another routing file, how would it look like?</strong></p>
  
  <p>My actual routing file looks like:</p>
  
  <pre><code>import { Routes, RouterModule } from '@angular/router';
  import { MainAppComponent} from './mainApp/index';
  import { LoginComponent } from './login/index';
  import { RegistrationComponent } from './registration/index';
  
  const appRoutes: Routes = [
    { path: '', component: LoginComponent },
    { path: 'mainApp', component: MainAppComponent },
    { path: 'registration', component: RegistrationComponent },
  
    { path: '**', redirectTo: '' }
  ];
  
  export const routing = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p><strong>Let's say that I provide another routing file, would it look like this?</strong></p>
  
  <pre><code>import { Routes, RouterModule } from '@angular/router';
  import { subMenu1Component } from './subMenu1/index';
  import { subMenu2Component } from './subMenu2/index';
  import { subMenu3Component } from './subMenu3/index';
  
  const appRoutes: Routes = [
    { path: '', component: mainAppComponent},
    { path: 'subMenu1', component: subMenu1Component },
    { path: 'subMenu2', component: subMenu2Component },
    { path: 'subMenu3', component: subMenu3Component },
  
    { path: '**', redirectTo: '' }
  ];
  
  export const routing = RouterModule.forRoot(appRoutes);
  </code></pre>