Monday, 3 September 2018

Angular routing ignoring parts of route when selecting component

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