У меня есть модуль приложения, который лениво загружает несколько других модулей по этим заданным маршрутам:
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
}
];
Теперь в аналитических маршрутах у меня есть это:
analyticsRoutes: Routes = [
{
path: 'campaign',
component: CampaignsComponent
},
{
path: 'campaign/:campaignId',
component: CampaignComponent
}
// ... several other routes ...
];
И, наконец, маршруты кампании:
campaignRoutes: Routes = [
{
path: '',
component: JourneyListComponent
},
{
path: 'journey',
component: JourneyListComponent
}
]
Маршруты в AppModule загружаются с RouterModule.forRoot(appRoutes, { onSameUrlNavigation: 'reload'}), а маршруты в AnalyticsModule / CampaignModule загружаются так: RouterModule.forChild(<module>Routes)
Маршрутизация прекрасно работала во всем приложении, пока я не добавил модуль кампании, который имеет аналогичный маршрут для аналитики / кампании, но имеет другой корень.
Полный маршрут аналитики (который работает) - <site-url>/analytics/campaign, а полный маршрут кампании (не работает) - <site-url>/campaign.
Когда я иду на кампанию /campaign или campaign/journey маршрут, он загружает компонент, указанный в def маршрута для /analytics/campaign. В настоящее время единственное, что должно отображаться в правильном компоненте - это <h1>Hello World</h1>
Если я изменил ленивый загруженный маршрут campaign на campaigns (добавив 's'), чтобы он не соответствовал маршруту аналитики, это исправит проблему, но я не хочу, чтобы во множественном числе в любом месте.
Я попытался добавить pathMatch ко всем маршрутам (как префиксным, так и полным), но это не изменило поведение.
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"
}