Question

我有一个应用程序模块，可以通过以下定义的路径懒加载其他模块：

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路线时，它会加载/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"
}

Answer 1

在评论中回答，请给我该代表。（つ◕_◕）つ

如果您将带有路由的延迟加载模块错误地导入到app模块中，则会发生这种情况。重现此问题：stackblitz.com/edit/angular-yrmdaj

在应用程序模块中删除“ AnalyticsModule”导入，它将不再中断。

选择组件时，角度路由忽略了部分路由

1 个答案: