typescript - El enrutamiento perezoso de Angular ignora la ruta del padre

Estoy usando Angular 6.1 e intenté configurar un módulo de aplicación y un módulo de características (llamado módulo de entidades) usando enrutamiento diferido. Quiero crear una ruta /entities/list, vinculando a un componente dentro de mi módulo de entidades. Pero no puedo hacer que esta ruta funcione. En su lugar, el componente se mostrará cuando navegue a /list. ¿Por qué mi enrutamiento está ignorando la ruta principal "/entities"?

app.module.ts:

import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {BrowserModule} from '@angular/platform-browser';
import {EntitiesModule} from './entities/entities.module';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [AppRoutingModule, BrowserModule, EntitiesModule],
    providers: []
})

export class AppModule {}

app-routing.module.ts:

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

const routes: Routes = [
    {path: 'entities', loadChildren: './entities/entities.module#EntitiesModule'},
    {path: '', redirectTo: '', pathMatch: 'full'}
];

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

export class AppRoutingModule {}

app.component.ts:

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

@Component({
    selector: 'app-root',
    template: 'app <router-outlet></router-outlet>'
})

export class AppComponent {}

entidades/entidades.module.ts:

import {NgModule} from '@angular/core';
import {EntitiesRoutingModule} from './entities-routing.module';
import {EntitiesComponent} from './entities.component';

@NgModule({
    declarations: [EntitiesComponent],
    imports: [EntitiesRoutingModule]
})

export class EntitiesModule {}

entities/entities-routing.module.ts:

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {EntitiesComponent} from './entities.component';

const routes: Routes = [
    {path: 'list', component: EntitiesComponent}
];

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

export class EntitiesRoutingModule {}

entidades/entidades.componente.ts:

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

@Component({
    selector: 'app-entities',
    template: 'entities'
})

export class EntitiesComponent {}

También intenté definir la ruta en el módulo de entidades usando lo siguiente, pero el componente aún se mostrará al navegar a /list, no a /entities/list.

const routes: Routes = [
    {
        path: '', children: [
            {path: 'list', component: EntitiesComponent}
        ]
    }
];

¿Qué estoy haciendo mal? ¡Cualquier ayuda es apreciada!

Respuesta #1

Estás intentando hacer carga perezosa. Sin embargo, estás haciendo carga ansiosa.

En app.module.ts la línea:

imports: [AppRoutingModule, BrowserModule, EntitiesModule],

está cargando el módulo de Entidades. Elimínalo de allí para la carga diferida y debería funcionar.

Respuesta #2

Intenta cargar el módulo cargado perezosamente como un hijo.

  {
    path: 'entities',
    children: [{
      path: '',
      loadChildren: './entities/entities.module#EntitiesModule'
    }]
  }