title: How to define routes for named router outlets which are in a sub component
body: <p>I would like to build an angular 4 app that consists of like two different sub-apps: main-app and admin-app.
  I was thinking about having an app component which is bootstrapped and has only the <code>&lt;router-outlet&gt;</code> in the template:</p>
  
  <p><strong>app.component</strong><br>
  template: <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code><br>
  routes:<br>
  "main" => main-app<br>
  "admin" => admin-app</p>
  
  <p>The main-app has a router-outlet and a named router-outlet in the template where I would like to display different components at the same time.<br>
  <strong>main-app.component</strong><br>
  template:  <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;&lt;router-outlet name='action'&gt;&lt;/router-outlet&gt;</code><br>
  routes:<br>
  "content" => content.component<br>
  "action" => action.component (displayed in the action router-outlet)</p>
  
  <p>My problem is that the "action" route does not work, i.e. it does not display 
   the action.component in the action router-outlet when accessing <code>http://localhost:4200/main/app(action:action)</code> or <code>http://localhost:4200/main/app/content(action:action)</code>, but gives an exception:</p>
  
  <blockquote>
    <p>Error: Cannot match any routes. URL Segment: 'action'</p>
  </blockquote>
  
  <p>My actual routes look like this:<br>
  <strong>app-routing.module</strong>  </p>
  
  <pre><code>const routes: Routes = [
    {
      path: 'main',
      loadChildren: "app/main-app/main-app.module#MainAppModule",
    },
    {
      path: 'admin',
      loadChildren: "app/admin-app/admin-app.module#AdminAppModule",
    },
  ]
  </code></pre>
  
  <p><strong>main-app-routing.module</strong>  </p>
  
  <pre><code>const routes: Routes = [
    {
      path: "",
      redirectTo: "app",
      pathMatch: "full"
    },
    {
      path: "app",
      component: MainAppComponent,
      children: [
        {
          path: "content",
          component: ContentComponent
        },
        {
          path: "action",
          outlet: "action",
          component: ActionComponent
        }
      ]
    }
  ]
  </code></pre>
  
  <p>My questions:<br>
  How do I have to specify the routes in order to make it work?<br>
  Is there another recommended way to have build my app that consists of two sub-apps?  </p>
  
  <p>Thank you!</p>