嵌套路由模块角度

Question

我正在尝试实现带有延迟加载概念的有角度的嵌套路由模块。但是当达到第三级时，lazyloading无法正常工作，这是两次加载父模块，但是如果我使用component而不是loadChildren，它可以正常工作。在下面的代码中，如果我称其为使用loadchildren加载的子模块，则仪表板模块将加载两次

app-routing.module.ts

const routes: Routes = [
  {
    path: 'pages',
    loadChildren: () => import('./pages/pages.module')
      .then(m => m.PagesModule),
  },
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

pages-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { PagesComponent } from './pages.component';
import {HomeComponent} from "./home/home.component";

const routes:Routes =[
{
path:'',
component:PagesComponent,
children:[
  {
    path:'home',
    component:HomeComponent
  },
  {
    path:"admin",
    loadChildren: () => import("./admin/admin.module").then(m => m.AdminModule)
  },
  {
    path:"dashboard",
    loadChildren:() => import("./dashboard/dashboard.module").then(m => m.DashboardModule)
  }
  ]
},
]


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PagesRoutingModule { }

dashboard-routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {DashboardComponent} from "./dashboard.component";
import {PaymenAndFeesComponent} from "./payment-and-fees/paymen-and-fees.component";
import {SpendsComponent} from "./spends/spends.component";

const dashboardRoutes:Routes = [
  {
    path:'',
    component:DashboardComponent,
    children:[
      {
        path:"payment",
        loadChildren: () => import("./payment-and-fees/payment-and-fees.module").then(

         m => m.PaymentAndFeesModule
        )
         //component: PaymenAndFeesComponent
      },
      {
        path:"spends",
         component: SpendsComponent
      }

    ]

  },

]

@NgModule({
  imports: [RouterModule.forChild(dashboardRoutes)],
  exports: [RouterModule] 
})
export class DashboardRoutingModule { }

payment-and-fees.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PaymenAndFeesComponent } from './paymen-and-fees.component';



@NgModule({
  declarations: [PaymenAndFeesComponent],
  imports: [
    CommonModule
  ],
  bootstrap:[PaymenAndFeesComponent]
})
export class PaymentAndFeesModule { 

  constructor(){
    console.log("Payment and fees module");
  }
}