Angular routing ignoring parts of route when selecting component

Question

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.

Package.json deps:

"dependencies": {
    "@angular/animations": "6.0.6",
    "@angular/cdk": "^6.3.1",
    "@angular/common": "6.0.6",
    "@angular/compiler": "6.0.6",
    "@angular/core": "6.0.6",
    "@angular/forms": "6.0.6",
    "@angular/http": "6.0.6",
    "@angular/platform-browser": "6.0.6",
    "@angular/platform-browser-dynamic": "6.0.6",
    "@angular/router": "6.0.6",
    "@stomp/ng2-stompjs": "^4.0.0",
    "@swimlane/ngx-charts": "8.1.0",
    "@swimlane/ngx-datatable": "13.0.1",
    "@swimlane/ngx-ui": "21.1.2",
    "core-js": "^2.5.7",
    "d3": "^5.5.0",
    "lodash": "^4.17.10",
    "moment": "2.22.2",
    "moment-mini": "2.22.1",
    "moment-timezone": "^0.5.21",
    "mydaterangepicker": "^4.2.1",
    "ng-pick-datetime": "^6.0.7",
    "ng-pick-datetime-moment": "^1.0.6",
    "ng2-dragula": "1.5.0",
    "ng2-stomp-service": "^1.2.2",
    "ngx-monaco-editor": "^6.0.0",
    "ngx-toastr": "^8.8.0",
    "protractor": "^5.3.2",
    "rxjs": "^6.2.1",
    "rxjs-compat": "^6.2.1",
    "rxjs-tslint": "^0.1.5",
    "sockjs-client": "^1.1.5",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "xml2js": "^0.4.19",
    "zone.js": "^0.8.26"
}

Answer 1

This happens if you import lazy-loaded modules with routes erroneously into the app module. This reproduces the issue: stackblitz.com/edit/angular-yrmdaj

Remove the import of AnalyticsModule in the app module and it will no longer break.