Angular: nested router-outlet is always ignored

Question

Do you have any idea what might be wrong with my configuratoin if my second router-outlet is always ignored? This here is my app.module routing (app.component has one router-outlet):

const routes: Routes = [
  {
    path: 'home',
    loadChildren: './home/home.module#HomeModule',
    canLoad: [AuthorizationGuard]
  },
  {
    path: 'please-login',
    component: PleaseLoginComponent
  },
  {
    path: '**',
    redirectTo: 'please-login'
  }
];

And here is my home.module-routing (HomeComponent has another router-outlet):

RouterModule.forChild([
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
    children: [
      {
        path: 'welcome',
        component: WelcomeComponent
      }
    ]
  },
  {
    path: '**',
    redirectTo: 'welcome'
  },
  {
    path: 'Data',
    loadChildren: '@libs/data#DataModule'
  }
]),

I can load DataModule with no problems; it directs me to /home/data/blabla. But (!) it inserts DataComponent into the first router-outlet. The second one (and thus the whole HomeComponent which is supposed to surround DataComponent) is ignored. That is, unless I navigate to /home, then it is displayed, but as expected, with no DataComponent inside. Meaning I can use both components only exclusively and not nested.

I tried using named outlets, but to no success. When I trace-log the router-state, the resolves seem to be ok, so I am a bit lost here

The router-outlet in the home component is where the component of the matched child route will be inserted. Your home route has a single child route 'welcome'. So if you go to /home/welcome, the WelcomeComponent will be inserted there. For any other route, you won't be in a child route of the default home route, so nothing will be inserted. — JB Nizet
@JBNizet thanks, I have adjusted my code accordingly (I think you and SiddAjmera had the same idea). But I still get an error (see my comment to the answer) with this configuration. Do you know why? — Phil
@Phil, with a great catch from JBNizet, I've updated my answer. That should do the trick. — SiddAjmera

SiddAjmera SiddAjmera · Accepted Answer · 2018-11-24T10:09:15

To make the DataComponent load in the router-outlet of the HomeComponent(which means you'll have to add a <router-outlet></router-outlet> to your HomeComponent template as well), you will have to make data as a child of the '' path.

Another thing that you'll have to do is remove pathMatch: 'full' from your '' route. What it would do is, try to match the path in chunks, i.e. if '' is matched, it will try to check for any matching child routes.

Finally, I'm not sure if it's a typo or not, but the path should be data and NOT Data.

All this would translate to code something like this:

RouterModule.forChild([
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: 'data',
        loadChildren: '@libs/data#DataModule'
      },
      {
        path: 'welcome',
        component: WelcomeComponent
      },
      {
        path: '**',
        redirectTo: '/welcome',
        pathMatch: 'full'
      }
    ]
  },
  ...
]),

Angular: nested router-outlet is always ignored

1 Answers