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

Question

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!

Does it work if it is not lazy loaded? There are some issues with lazy loading and aux routes, such as this one: github.com/angular/angular/issues/15447 — DeborahK

bgraham bgraham · Accepted Answer · 2017-09-15T16:03:31

Instead of having a named router-outlet I would actually have nested routing components. So your main AppComponent just has one router-outlet. And your routing for your app is fine the way you have it:

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

But now you create two separate modules for the two sub apps. The MainApp for example would look like this:

const mainAppRoutes: Routes = [
  {
    path: 'main',
    component: MainAppComponent,
    children: [
      {
        path: "content",
        component: ContentComponent
      },
      {
        path: "action",
        outlet: "action",
        component: ActionComponent
      }
    ]
  }


@NgModule({
  imports: [
    RouterModule.forChild(mainAppRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class MainAppModule { }


@Component({
  template:  `
    <h2>Main App</h2>
    <router-outlet></router-outlet>
  `
})
export class MainAppComponent { }

Notice that the routes have a nested children routes array. These routes will actually get plugged into the MainAppComponent router-outlet not into the AppComponent router-outlet. Then you can import those routes into the MainAppModule using the RouterModule.forChild() method. This set up will still work with our lazy loading, and I think will give you a cleaner separation in your areas.

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

2 Answers