Angular 2 route is getting loaded into the top level router-outlet despite having a specified router-outlet defined on the route

Question

Here you can see the problem:

admin-area-models-models should be rendered into the router-outlet with the name models-content, but instead it's put inside the same router-outlet as the parent module, which is admin-area-models. Which doesn't make any sense since I got this in the admin-area-models router:

const routes: Routes = [
  {
    path: '',
    component: ModelsComponent
  },
  {
    path: 'brands',
    loadChildren: '../pages/+models-brands/models-brands.module#ModelsBrandsModule',
    outlet: 'models-content'
  },
  {
    path: 'models',
    loadChildren: '../pages/+models-models/models-models.module#ModelsModelsModule',
    outlet: 'models-content'
  },
  {
    path: 'models/:id',
    loadChildren: '../pages/+model/model.module#ModelModule',
    outlet: 'models-content'
  }
];

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    ModelsComponent
  ]
})

export class ModelsRouterModule {}

How come that when I have a specific outlet defined, it still renders it into the top level one?

EDIT:

If I change so that the routes are children are defined like this instead:

const routes: Routes = [
  {
    path: '',
    component: ModelsComponent,
    children: [
      {
        path: 'brands',
        loadChildren: '../pages/+models-brands/models-brands.module#ModelsBrandsModule',
        outlet: 'models-content'
      },
      {
        path: 'models',
        loadChildren: '../pages/+models-models/models-models.module#ModelsModelsModule',
        outlet: 'models-content'
      },
      {
        path: 'models/:id',
        loadChildren: '../pages/+model/model.module#ModelModule',
        outlet: 'models-content'
      }
    ]

  }
];

Then none of the routes work. ModelsComponent is at /admin/dashboard/models, so with the first config I showed all routes all accessible like this:

/admin/dashboard/models
/admin/dashboard/models/(models-content:brands)
/admin/dashboard/models/(models-content:models)
/admin/dashboard/models/(models-content:models/5) // Any number

But when trying out the config that uses children, I can no longer access any of these routes. Suggesting that using this syntax with lazy loaded files is wrong.

Fabio Antunes Fabio Antunes · Accepted Answer · 2016-10-21T09:25:42

Because your admin-area-models-models aren't children of your admin-area-models, your routes need to be something like:

const routes: Routes = [
  {
    path: '',
    component: ModelsComponent,
    children: [
      {
        path: 'brands',
        loadChildren: '../pages/+models-brands/models-brands.module#ModelsBrandsModule',
        outlet: 'models-content'
      },
      {
        path: 'models',
        loadChildren: '../pages/+models-models/models-models.module#ModelsModelsModule',
        outlet: 'models-content'
      },
      {
        path: 'models/:id',
        loadChildren: '../pages/+model/model.module#ModelModule',
        outlet: 'models-content'
      }
    ]

  }
];

You want to render your auxiliary routes inside admin-area-models where you have your <router-outlet name="models-content">, but this how you are declaring your routes:

And this how you want to render them:

You clearly need to change your logic, because your routes are not siblings they are children of admin-area-models

Angular 2 route is getting loaded into the top level router-outlet despite having a specified router-outlet defined on the route

1 Answers