Angular 2 Different modules same routing

Question

I am having two main routes, both loading same child module. Is there any possible way to have two routes with same name on the child module that loads two different components with respect to the main route.

Main Routes:

export const ROUTES: Routes = [{
    path: 'first',
    loadChildren: './features/common#CommonModule',
    canActivate: [AppAuthGuard]
}, {
    path: 'second',
    loadChildren: './features/common#CommonModule',
    canActivate: [AppAuthGuard]
}]

Now I'm expecting the common module to have routes something like this

export const routes = [{
        path: 'list', component: FirstListComponent, pathMatch: 'full' }
    },{
        path: 'list', component: SecondListComponent, pathMatch: 'full' }
    }]

So, I want something like

• If route is first/list, then FirstListComponent should be loaded.
• If route is second/list, then SecondListComponent should be loaded.

I know that the order of the routes matters. And the proposed way is not possible. Can anyone suggest any possible way to achieve this.

Answer 1

Please set path like this

export const routes = [{
        path: 'first/list', component: FirstListComponent, pathMatch: 'full' }
    },{
        path: 'second/list', component: SecondListComponent, pathMatch: 'full' }
    }]