Angular Routing opening wrong component

Question

I want to lazy load a module, which then should not lazy load further modules. I managed to get lazy loading to work, but it then shows me the wrong component even though the route is correct.

As you can see the path is correct, since I want the page "Push-Campaign" to show. It then shows me the "Client Targeting" component.

app-routing.module.ts

const LAYOUT_ROUTES = [navbarRoute, ...errorRoute];

const routes: Routes = [
    {
      path: 'admin',
      data: {
        authorities: [Authority.ADMIN],
      },
      canActivate: [UserRouteAccessService],
      loadChildren: () => import('./admin/admin-routing.module').then(m => m.AdminRoutingModule),
    },
    {
      path: 'account',
      loadChildren: () => import('./account/account.module').then(m => m.AccountModule),
    },
    {
      path: 'recommended-section',
      loadChildren: () => import('./entities/recommended-section/recommended-section.module').then(m=> m.RecommendedSectionModule),
    },
    {
      path: 'push-campaign',
      loadChildren: () => import('./entities/push-campaign/push-campaign.module').then(m=> m.PushCampaignModule),
    },
    {
      path: 'customer',
      loadChildren: () => import('./entities/customer/customer.module').then(m=> m.CustomerModule),
    },
    ...LAYOUT_ROUTES,
  ]

@NgModule({
  imports: [
    RouterModule.forRoot(routes,{ enableTracing: DEBUG_INFO_ENABLED }),],
  exports: [RouterModule],
})
export class AppRoutingModule {}

push-campaign.module.ts

@NgModule({
  imports: [SharedModule, TargetingModule, PushCampaignRoutingModule, PushChannelModule, AppDeepLinkModule, AudienceModule, PushCampaignDeploymentModule],
  declarations: [
    PushCampaignComponent,
    PushCampaignDetailComponent,
    PushCampaignUpdateComponent,
    PushCampaignDeleteDialogComponent,
    PushCampaignPreviewComponent,
  ],
  entryComponents: [PushCampaignDeleteDialogComponent],
})
export class PushCampaignModule {}

targeting.module.ts

@NgModule({
  imports: [SharedModule, ClientTargetingModule],
  declarations: [
    TargetingComponent,
    TargetingDetailComponent,
    TargetingUpdateComponent,
    TargetingDeleteDialogComponent,
    TargetingClientComponent,
  ],
  exports: [TargetingUpdateComponent],
  entryComponents: [TargetingDeleteDialogComponent],
})
export class TargetingModule {}

client-targeting.module.ts

@NgModule({
  imports: [SharedModule, RouterModule.forChild(clientTargetingRoute)],
  declarations: [
    ClientTargetingComponent,
    ClientTargetingDetailComponent,
    ClientTargetingUpdateComponent,
    ClientTargetingDeleteDialogComponent,
  ],
  entryComponents: [ClientTargetingDeleteDialogComponent],
})
export class ClientTargetingModule {}

Why is it doing this and how can I fix it?

Thank you for your help in advance.

Answer 1

So I fixed it! As stated in the comments I added a routing.module, but it did still not work... so I just tried around and finally managed to get it to work by changing the sequence of the imports in the push-campaign.module.ts:

@NgModule({
  imports: [SharedModule, RouterModule.forChild(pushCampaignRouterModule), TargetingModule, ...

Is there a reason why the RouterModule.forChild() has to be before all other imported Modules?