Angular 8延迟加载和路由无法正常工作

Question

目前，我具有以下简单的应用程序层次结构。

/home
/admin
/admin/customers
/admin/customers/:id
/admin/orders
/admin/orders/:Id

使用Angular Routing，我的懒惰加载模块遇到了麻烦，在这些模块中，基本生成的页面无法加载。我有简单的生成的组件，可以正常工作！文本。但是，此文本不会显示。将来我将使用AuthGuard来保护对Admin的访问，但是现在，我只想看看我是否正确浏览了该应用程序。

Adminstrator组件是一个简单的按钮链接，可移动到/admin/customers和/admin/orders，今天这些按钮是一些示例静态数据的简单列表。这些仅使用*ngFor语句显示。每个组件（当它是主页时）或HomeComponent.html中包含选择器时都可以正确显示。我的路由似乎无法正常工作。我试图只将客户组件加载到客户模块中，因为这将是自包含的，类似于订单，将来还会有新功能。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { environment } from 'src/environments/environment';

import { HomeComponent } from './home/home.component';

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'admin', loadChildren: () => import('./administration.module').then(m => m.AdministrationModule) },
    { path: 'home', component: HomeComponent }
];

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

app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HomeComponent } from './home/home.component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AppComponent,
        HomeComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule
    ],
    providers: []
})
export class AppModule { }

admin-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AdministratorComponent } from '@admin/administrator/administrator.component';

const AdministratorRoutes: Routes = [
    { path: '', component: AdministratorComponent, /* canActivate: [AuthGuard], */ children: [
        { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomerModule) },
        { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrderModule) },
    ]}
];

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

admin.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AdministrationRoutingModule } from '@admin/administration-routing.module';

import { AdministratorComponent } from '@admin/administrator/administrator.component';

@NgModule({
    declarations: [AdministratorComponent],
    exports: [
    ],
    imports: [
        CommonModule,
        // Has to be last loaded module
        AdministrationRoutingModule,
    ]
})
export class AdministrationModule { }

customers-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CustomerListComponent } from './customer-list/customer-list.component';
import { CustomerEditComponent } from './customer-edit/customer-edit.component';

const CustomerRoutes: Routes = [
    { path: '', component: CustomerListComponent,
        children: [
            { path: 'customers/:id', component: CustomerEditComponent }
        ]
    }
];

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

customers.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CustomerRoutingModule } from './customer-routing.module';
import { CustomerListComponent } from './customer-list/customer-list.component';
import { CustomerEditComponent } from './customer-edit/customer-edit.component';


@NgModule({
    declarations: [CustomerListComponent, CustomerEditComponent],
    imports: [
        CommonModule,
        CustomerRoutingModule
    ]
})
export class CustomerModule { }

orders-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { OrderListComponent } from './order-list/order-list.component';
import { OrderEditComponent } from './order-edit/order-edit.component';

const OrderRoutes: Routes = [
    { path: '', component: OrderListComponent,
        children: [
            { path: 'orders/:id', component: OrderEditComponent }
        ]
    }
];

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

orders.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { OrderRoutingModule } from './order-routing.module';
import { OrderListComponent } from './order-list/order-list.component';
import { OrderEditComponent } from './order-edit/order-edit.component';


@NgModule({
    declarations: [OrderListComponent, OrderEditComponent],
    imports: [
        CommonModule,
        OrderRoutingModule
    ]
})
export class OrderModule { }