CODEWITHSUNDEEP
typescriptangularangular2-routing
Ali Shahzad
Ali Shahzad

Reputation: 5332

Angular2 RouterLink in child component is expecting route to be defined in parent component

I am using two components one is parent component and the second one is child component in its template. Now in child component I have defined a route and placed a router outlet and a router link in child component's template. So that when I click on this link it should update the contents at its own router outlet but its giving the following error and is searching for a route to be defined in its parent component:

EXCEPTION: Component "ParentComponent" has no route config.in[['ChildRoute'] in ChildComponent@2: 26]

The components are:

@Component({
    selector: 'parent-cmp',
    template: '<child-cmp></child-cmp>',
    directives: [
        ROUTER_DIRECTIVES,
        ChildComponent
    ]
})
export class ParentComponent { }

@Component({
    selector: 'child-cmp',
    template: `
        <router-outlet></router-outlet>
        <a [routerLink]="['ChildRoute']">Edit</a>
    `,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    { path: '/edit', name: 'ChildRoute', component: ChildEditComponent }
])
export class ChildComponent { }

Assuming the imports are correct, I haven't mentioned here for brevity.

Upvotes: 1

Views: 3374

Answers (4)

Rahman Bokhari
Rahman Bokhari

Reputation: 123

To access child route from parent, always use

<a [routerLink]=['ParentRouteElement','ChildRouteElement']

and should have one childrouteElement asDefault also.

Upvotes: 1

Yoel Acevedo
Yoel Acevedo

Reputation: 93

When you make the link to child route defines the route father before

try this, 

<a [routerLink]="['ParentRoute','ChildRoute']">Edit</a>

Upvotes: 4

cexbrayat
cexbrayat

Reputation: 18442

When you bootstrap your application, you may have referenced the ParentComponent as your router primary component instead of the ChildComponent.

You may need to have something like:

bootstrap(ParentComponent, [
  // ...
  provide(ROUTER_PRIMARY_COMPONENT, {useValue: ChildComponent})
]);

Upvotes: 0

Vlado Tesanovic
Vlado Tesanovic

Reputation: 6424

In main Route config you should have:

@RouteConfig([
  { name: "Videos", component: ChildrenCmp, path: "/videos/..."}
])

Than in child Component:

@RouteConfig([
  { name: "ChildCmp" component: ChildCmp, path: "/",
useAsDefault: true}])

Working example on Plunker

Upvotes: 0

Related Questions