title: How to implement multi-level routing in Angular?
body: <p>I'm working on a little project of mine in order to learn something more about Angular, but I really cannot figure out how to implement a multi-leveled routing.</p>
  
  <p>I've read the <a href="https://angular.io/docs/ts/latest/guide/router.html" rel="noreferrer">documentation</a> about the new release of the Router Component and also some other topics on StackOverlfow (<a href="https://stackoverflow.com/questions/37050283/is-it-possible-to-have-multiple-level-nested-route-in-angular2">first</a>, <a href="https://stackoverflow.com/questions/37233807/angular-2-routing-multi-layer-menus">second</a>, <a href="https://stackoverflow.com/questions/34439401/angular-2-multiple-router-outlet-for-sub-routes">third</a>), but I cannot find a solution to my problem.</p>
  
  <p>Let's consider the following <strong>app structure</strong>, without considering the <em>Test</em> and <em>Test2</em> blocks.</p>
  
  <p><a href="https://i.stack.imgur.com/nQAeR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nQAeR.png" alt="App structure"></a></p>
  
  <p>And let's consider the components of my app as following:</p>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>import { bootstrap }    from '@angular/platform-browser-dynamic';
  
  import { MyAppComponent } from './my-app/my-app.component';
  import { APP_ROUTER_PROVIDERS } from './my-app/my-app.routes';
  
  bootstrap(MyAppComponent, [ APP_ROUTER_PROVIDERS ])
      .catch(err =&gt; console.error(err));
  </code></pre>
  
  <p><strong>my-app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ROUTER_DIRECTIVES } from '@angular/router';
  
  @Component({
      selector: 'my-app',
      template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;',
      directives: [ROUTER_DIRECTIVES],
  })
  
  export class MyAppComponent { }
  </code></pre>
  
  <p><strong>my-app.routes.ts</strong></p>
  
  <pre><code>import { provideRouter, RouterConfig } from '@angular/router';
  
  import { HomeComponent } from './home/home.component';
  import { LoginComponent } from './login/login.component';
  import { SignUpComponent } from './sign-up/sign-up.component';
  
  import { AdminRoutes} from './admin/admin.routes';
  
  export const routes: RouterConfig = [
    { path: '', component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'sign-up', component: SignUpComponent },
    ...AdminRoutes,
  ];
  
  export const APP_ROUTER_PROVIDERS = [
      provideRouter(routes)
  ];
  </code></pre>
  
  <p><strong>admin.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ROUTER_DIRECTIVES } from '@angular/router';
  
  @Component({
      selector: 'admin',
      template: 'Hello I am ADMIN &lt;br&gt; &lt;router-outlet&gt;&lt;/router-outlet&gt;',
      directives: [ROUTER_DIRECTIVES]
  })
  
  export class AdminComponent { }
  </code></pre>
  
  <p><strong>admin.routes.ts</strong></p>
  
  <pre><code>import { RouterConfig } from '@angular/router';
  
  import { AdminComponent } from './admin.component';
  import { MainPageComponent } from './main-page/main-page.component';
  import { SettingsComponent } from './settings/settings.component';
  
  export const AdminRoutes: RouterConfig = [
    {
        path: 'admin',
        component: AdminComponent,
        children: [
          { path: 'main-page', component: MainPageComponent },
          { path: 'settings', component: SettingsComponent },
        ]
    }
  ];
  </code></pre>
  
  <p><strong>main-page.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'main-page',
      template: 'Hello I am MAIN PAGE!!!'
  })
  
  export class MainPageComponent { }
  </code></pre>
  
  <p><strong>settings.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'settings',
      template: 'Hello I am SETTINGS!!!'
  })
  
  export class SettingsComponent { }
  </code></pre>
  
  <p>When I try to use such a configuration nothing works anymore and the browser's console is full of errors.</p>
  
  <p>This happens only when I add the <strong>children[...]</strong> in the <strong>admin.routes.ts</strong>, and I think the problems come in there.</p>
  
  <ol>
  <li>Could you give me any hint on how I can implemented properly, please?</li>
  <li>Am I missing anything?</li>
  <li>Is there a better way?</li>
  </ol>
  
  <p>Thank you in advance for your help and I hope what I've written in the post it's helpful to understand my issue!</p>