CODEWITHSUNDEEP
angularangular2-routing
isawk
isawk

Reputation: 1057

Angular 2 routing, adding child routes causes route not to work

Whiles playing with angular 2 routes using the latest version, I noticed that adding a child route cause /admin route below not to work

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import {AdminChildComponent} from './admin-child.component';

import {productRoutes} from "../product/product.routes";

export const adminRoutes : Routes =[
  {
    path: 'admin', component: AdminComponent,
    children:[
      {path:"/child", component:AdminChildComponent}
    ]
  }
];

export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);

Once I remove below, applications wors just fine, soon as I add it I get console error

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'admin'

   children:[
      {path:"/child", component:AdminChildComponent}
    ]

Need help possibly understanding why am getting this error. Totally confusing.

Upvotes: 0

Views: 877

Answers (1)

micronyks
micronyks

Reputation: 55443

That's because:

As here it is clearly seen that AdminComponent has children. It means AdminComponent will have router-outlet somewhere in template.

Now the thing is, whenever router-outlet is used, it requires a view. In your routing case, it doesn't have any proper/primary child route. So you need to set it as shown below,

export const adminRoutes : Routes =[
  {
    path: 'admin', component: AdminComponent,
    children:[

      { path: '', redirectTo: 'child', pathMatch: 'full'}, //<----- here

      {path:"child", component:AdminChildComponent}
    ]
  }
];

NOTE: Changed /child to child. Why? Because angular2 router itself adds / between parent and its child routes. So here you don't need /.

Upvotes: 2

Related Questions