CODEWITHSUNDEEP
angulartypescriptangular2-routing
BBaysinger
BBaysinger

Reputation: 6857

Angular 2 Router gives error when parent of children parameters has a component assigned to it

The following router configuration gives me an error:

const appRoutes: Routes = [
  {
    path: 'group/:groupID',
    component: ExampleComponent1,
    children: [
      { path: 'grid/:gridID', component: ExampleComponent2 },
    ]
  }
];

Results in:

Error: Cannot find primary outlet to load 'ExampleComponent1'

But if I comment out the line component: ExampleComponent1,, then it works fine.

Shouldn't I be able to specify a component that displays when the grid parameter is omitted? How can I do that?

Upvotes: 0

Views: 65

Answers (1)

snorkpete
snorkpete

Reputation: 14574

ExampleComponent1 needs to include a Router Outlet.

Somewhere in that component's template, you need to include a <router-outlet></router-outlet> tag. This tag is the marking point for where your ExampleComponent2 will be inserted into ExampleComponent1 when you navigate to that URL.

Upvotes: 1

Related Questions