CODEWITHSUNDEEP
angularangular-routingangular-router
Tom Schreck
Tom Schreck

Reputation: 5287

Angular 4 LazyLoad child routes fails when child has same path

I have an app that shows a list of contacts with the ability to select a single contact and view it's details. A contact detail page has several tabs for sub-information about a contact (profile, touch-points, and contact info). Here are the pertinent URLs:

To see a list of contact:

To see all touch points for a given contact

Here's the routing data that constructs the route for contact list as well as lazy load routes for contact details:

    export const routing: ModuleWithProviders = RouterModule.forChild(
    [
        {
            path: 'list',
            component: PageContactListComponent
        },
        //... other routes here...
        {
            path: ':id',
            component: PageContactDetailComponent,
            children:
            [
                //... other routes here...
                //LAZY LOADED:
                { path: 'touch-points',     loadChildren: './detail/components/touch-points/touch-points.module#TouchPointModule' }             ]
        }
    ]);

Here's the routing data for touch-points module.

    export const routing:ModuleWithProviders = RouterModule.forChild(
    [   
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'list'
        },
        {
            path: 'list',
            component: TouchPointListComponent
        }
    ]);

When I navigate to http://localhost:4200/contact/list, Angular tries to load the component associated with http://localhost:4200/contact/84/touch-points/list. It seems to do this because 'list' is also defined in a lazy-loaded module. If I change 'list' to 'history' in routing data for touch-points module, then http://localhost:4200/contact/list loads the appropriate component.

Angular 4 router should be able to differentiate between these routes: (http://localhost:4200/contact/list, http://localhost:4200/contact/84/touch-points/list) and load the appropriate component.

What changes do I need to make to my route definitions to facilitate using 'list' in multiple routes within the same functional area (ie contacts)?

--- UPDATE 08/01/2017 ---

I created the following plunker that demonstrates this issue:

Clicking on 'Contact List' link in plunker loads a list of touch-points instead of loading a list of contacts. Touch Points is a lazy-loaded module inside Contact domain.

What's supposed to happen is to navigate to a list of contacts. Clicking on a contact should take you to contact detail page allowing you to click on touch-point link to see a list of touch points for the selected contact.

Contact module's list route (/contact/list) uses 'list' for it's route. The touchpoint list route needs to be /contact/:id/touch-points/list. Because list is used in both routes, the last route defined overrides the first route and subsequently the component for touchpoint list gets loaded when navigating to /contact/list route.

Thank you.

Upvotes: 0

Views: 354

Answers (1)

BillF
BillF

Reputation: 864

You're gonna smack your forehead when you see what it was.

You were importing the TouchPoint module in your contact.module.ts (line 4 and line 15). This is what was stomping over your 'list' path.

Remove those, and it works fine.

Upvotes: 5

Related Questions