angular - el outlet del enrutador no se está renderizando

la estructura de la carpeta de mi proyecto es como la siguiente

|-- app
     |-- home
       |-- home-page
           |--home-page.component.css
           |--home-page.component.html
           |--home-page.component.spec.ts
           |--home-page.component.ts
       |-- login
           |--home-page.component.css
           |--home-page.component.html
           |--home-page.component.spec.ts
           |--home-page.component.ts
       |-- user-profile
           |--user-profile.component.css
           |--user-profile.component.html
           |--user-profile.component.spec.ts
           |--user-profile.component.ts
     |-- home-routing.module.ts
     |-- home.module.spec.ts
     |-- home.module.ts
|-- app-routing.module.ts
|-- app.component.css
|-- app.component.html
|-- app.component.ts
|-- app.module.ts

mi home-routing.module.ts consistiendo como se muestra a continuación

export const HomeRoutingModule: Routes = [
    {
        path: "user-profile",
        children: [
            {
                path: "user-profile",
                component:UserProfileComponent ,
                data: {
                    title: "user-profile",
                    urls: [{ title: "user-profile", url: "user-profile" }]
                }
            }
        ]
    }
];

y app-routing.module.ts es como se muestra a continuación

  { path: "home", component: LoginComponent },
  {
    path: "user-profile",
    component: HomePageComponent,
    children: [
      { path: "user-profile", loadChildren: "./home/home.module#HomeModule" },
    ]
  }

ahora estoy tratando de renderizar user-profile.components.html dentro de home-page.component.html, para eso intenté agregar el fragmento de código de ejemplo en el home-page.component.ts como se muestra a continuación

<p>this is header</p>
<router-outlet></router-outlet>
<p>this is footer</p>

mi URL es como la siguiente localhost:4200/#/user-profile, pero solo está mostrando la siguiente salida excepto el contenido

this is header

this is footer

Creo que me perdí algo, incluso no puedo averiguar qué es. ¿Alguien podría señalar qué salió mal en este código?

Editar: home.module.ts

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

import { HomeRoutingModule } from './home-routing.module';
import { LoginComponent } from './login/login.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { HomePageComponent } from './home-page/home-page.component';


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(HomeRoutingModule),
    HomeRoutingModule,
  ],
  declarations: [UserProfileComponent, HomePageComponent]
})
export class HomeModule { }

Respuesta #1

El problema está en la profunda anidación de tu ruta /user-profile/user-profile. Deberías usar la ruta solo una vez.

Versión modificada de tu enrutamiento

app-routing.module.ts

{ path: "home", component: LoginComponent },
{
    path: "user-profile",
    component: HomePageComponent,
    children: [
      { path: "", loadChildren: "./home/home.module#HomeModule" },
    ]
  }

home-routing.module.ts

export const HomeRoutingModule: Routes = [
    {

                path: "",
                component:UserProfileComponent ,
                data: {
                    title: "user-profile",
                    urls: [{ title: "user-profile", url: "user-profile" }]
                }
    }
];

Editar

Elimina HomeRoutingModule de las importaciones.

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(HomeRoutingModule)
  ],
  declarations: [UserProfileComponent, HomePageComponent]
})
export class HomeModule { }

Respuesta #2

app-routing.module.ts

    { path: "home", component: LoginComponent },
  {
    path: "user-profile",
    component: HomePageComponent,
    loadChildren: "./home/home.module#HomeModule"
  }

home-routing.module.ts

export const HomeRoutingModule: Routes = [
    {

                path: "",
                component:UserProfileComponent ,
                data: {
                    title: "user-profile",
                    urls: [{ title: "user-profile", url: "user-profile" }]
                }
    }
];