How to define routes for named router outlets which are in a sub component

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 <router-outlet> in the template:

app.component
template: <router-outlet></router-outlet>
routes:
"main" => main-app
"admin" => admin-app

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.
main-app.component
template: <router-outlet></router-outlet><router-outlet name='action'></router-outlet>
routes:
"content" => content.component
"action" => action.component (displayed in the action router-outlet)

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 http://localhost:4200/main/app(action:action) or http://localhost:4200/main/app/content(action:action), but gives an exception:

Error: Cannot match any routes. URL Segment: 'action'

My actual routes look like this:
app-routing.module

const routes: Routes = [
  {
    path: 'main',
    loadChildren: "app/main-app/main-app.module#MainAppModule",
  },
  {
    path: 'admin',
    loadChildren: "app/admin-app/admin-app.module#AdminAppModule",
  },
]

main-app-routing.module

const routes: Routes = [
  {
    path: "",
    redirectTo: "app",
    pathMatch: "full"
  },
  {
    path: "app",
    component: MainAppComponent,
    children: [
      {
        path: "content",
        component: ContentComponent
      },
      {
        path: "action",
        outlet: "action",
        component: ActionComponent
      }
    ]
  }
]

My questions:
How do I have to specify the routes in order to make it work?
Is there another recommended way to have build my app that consists of two sub-apps?

Thank you!