Angular not able to navigate to child route

Question

I am not able to go directly to the child route. my url is http://localhost:4201/home/profile but the router tracing starts with url: '/home’ instead of url: ‘/home/profile'

Router Event: NavigationStart platform-browser.es5.js:1028 NavigationStart(id: 1, url: '/home') platform-browser.es5.js:1028 NavigationStart {id: 1, url: "/home”}

const feedsRoutes: Routes = [
    {
        path: '',
        component: HomeComponent,
        children: [
            { path: 'home', redirectTo: '', pathMatch: 'full' },
            { path: '', loadChildren: '../feeds-home/feeds-home.module#FeedsHomeModule' },
            { path: 'business', loadChildren: '../business-home/business-home.module#BusinessModule' },
            { path: 'people', loadChildren: '../people-home/people-home.module#PeopleModule' },
            { path: 'profile', loadChildren: '../profile-home/profile-home.module#ProfileModule' },
            { path: 'settings', component: SettingsComponent, data: { title: 'Settings' } }
        ]
    }
];

is this due to loading child routes as modules?

How you're trying to navigate to child route?? add code please — Pankaj Parkar
profile isn't a chikd route of home.Looks like localhost:4201/profile is what you want — Günter Zöchbauer
If you are looking for nested routes, Use angular ui route instead of angular route. — Jijo Cleetus

Goku Goku · Accepted Answer · 2018-07-10T18:27:52

Try explicitly making a route entry in your array with '/home/profile' and put that entry BEFORE { path: 'home', redirectTo: '', pathMatch: 'full' }. This is because angular reads them from first to last and will exit whenever any of the entries evaluate to true. Otherwise 'home' would get navigated to rather than 'home/profile' in every case.

Angular not able to navigate to child route

1 Answers