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, отображается правильно. Кажется, моя маршрутизация работает неправильно. Я пытаюсь загружать только компоненты Customer в модуле customer, поскольку в дальнейшем они будут автономными, аналогичными заказам и новым функциям.

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. тс

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 { }