Render the children route in parent router-outlet

Question

My router-outlet is located in FullLayoutComponent, and my navigation menu routes are located in that template.

The first children array you see below are navigation menu routes. The children array in 'apartments' are some routes from different template located in ApartmentsComponent.

I am getting the error:

Cannot find primary outlet to load 'ApartmentItemsComponent'

I have tried moving the apartment-items outside of the children, but then my route is wrong.

It is Home > Apartment Items, and it should be Home > Apartments > Apartment Items

path: '',
component: FullLayoutComponent,
data: {
  title: 'Home'
},
children: [
  {
    path: 'apartments',
    component: ApartmentsComponent,
    data: {
      title: 'Apartments'
    },
    children: [
        {
         path: 'apartment-items',
         component: ApartmentItemsComponent,
         data: {
           title: 'Apartment Item'
          }
        }]
  },.....

How can I make apartment-items recognise my main router-outlet?

EDIT: To explain it more on what I want to achieve.

So basically, when I press view more, I would like to render Apartment Items component in that main router outlet.

So my route would look like Home / Apartments / Apartment Item.

If I remove Apartment Items from children, my route will look like Home / Apartment Item. But if I leave it in children then I get that error I posted above.

Pablo Lozano Pablo Lozano · Accepted Answer · 2017-07-31T08:26:54

I'm not sure what you want to achieve, but your current Router configuration expects a <router-outlet> tag within the template of the ApartmentsOutlet component because your are nesting the components: The FullLayoutComponent already has a , which is where the ApartmentsComponent is placed. Now it expects to find the same there to place the ApartmentItemsComponent.

UPDATE: I guess you want to show a list of apartments and, when users click on an apartment, to show the details of that one. A way to do that is the following:

const ROUTES=[

    { path: '', redirectTo: '/apartments', pathMatch: 'full' },
    {
        path: '', component: FullLayoutComponent,
        children: [
            {
                path: 'apartments',
                children: [
                    {
                        path: '',
                        component: ApartmentListComponent,
                        canActivate: [HasClinics]
                    },
                    {
                        path: 'new',
                        component: ApartmentComponent,
                        canActivate: [HasClinics]
                    },
                    {
                        path: ':id',
                        component: ApartmentDetailsComponent
                    }
                ]
            },
            {
                path: 'hotels', //just an example
                children: [ ...] //other elements
            }
        ]
    }

So you have a "headless" route named apartments. If you add nothing else, then the child with the empty path will be shown. If you add an id, something like apartments/34, then the details of apartment with id 34 should be given. The path apartments/new should show a form to add a new one

Render the children route in parent router-outlet

1 Answers