I have a app module that lazy loads several other modules via these defined routes:
appRoutes: Routes = [
{
path: 'campaign',
loadChildren: './campaign/campaign.module#CampaignModule'
},
{
path: 'analytics',
loadChildren: './analytics/analytics.module#AnalyticsModule'
},
// .... several other routes...
{
path: 'not-found',
component: NotFoundComponent
},
{
path: '**',
component: NotFoundComponent
}
];
Now, in the analytics routes I have this:
analyticsRoutes: Routes = [
{
path: 'campaign',
component: CampaignsComponent
},
{
path: 'campaign/:campaignId',
component: CampaignComponent
}
// ... several other routes ...
];
And lastly the campaign routes:
campaignRoutes: Routes = [
{
path: '',
component: JourneyListComponent
},
{
path: 'journey',
component: JourneyListComponent
}
]
The routes in the AppModule are loaded with RouterModule.forRoot(appRoutes, { onSameUrlNavigation: 'reload'}) and the routes in the AnalyticsModule/CampaignModule are loaded like this: RouterModule.forChild(<module>Routes)
Routing worked perfectly throughout the app until I added the campaign module, which has a similar route to analytics/campaign, but a different root.
The full analytics route (which works) is <site-url>/analytics/campaign, and the full campaign route (doesn't work) is <site-url>/campaign.
When I go to the campaign /campaign or campaign/journey route, it loads the component specified in the route def for /analytics/campaign. Currently, the only thing in the correct component that should show is <h1>Hello World</h1>
If I change the lazy loaded campaign route to campaigns (adding an 's') so it's doesn't match the analytics route, it fixes the issue, but I don't want it to be plural in either place.
I tried adding a pathMatch to all the routes (both prefix and full) but it didn't change the behavior.
from Angular routing ignoring parts of route when selecting component
No comments:
Post a Comment