routerLinkで画面遷移をさせたい

Question

やろうとしていること

ログイン機能で画面遷移だけをさせようとしています。
router-outletをHTMLに記述しているのでリンクで画面遷移させたいが、遷移先のコンポーネントが下に積み上がってく状況です。

状況

現状
component1
↓リンクをクリック
component1
component2

理想
component1
↓リンクをクリック
component2

router-outletは仮想のコンポーネントを表示させると聞き何もないコンポーネントを用意してやれば画面が切り替わると教わりましたが、実際やってみると自分の場合はうまくいかない状況です。

ソースコード

app-routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { from } from 'rxjs';
import { SessionComponent } from './session/session.component';
import { MyPageComponent } from './my-page/my-page.component';
import { UserCreateComponent } from './user-create/user-create.component';
import { UserCreateConfirmComponent } from './user-create-confirm/user-create-confirm.component';
import { UserCreateDoneComponent } from './user-create-done/user-create-done.component';
import { UserCreateRoutingModule } from './user-create/user-create-routing.module';
import { MyPageRoutingModule } from './my-page/my-page-routing.module';

const routes: Routes = [
  {
    path: "", 
    component: SessionComponent,
    children: [
      { path: 'user-create',
        component: UserCreateComponent,
        children:[
          { path: 'user-create-confirm', component: UserCreateConfirmComponent},
          { path: 'user-create-done', component: UserCreateDoneComponent},
        ]
      }
    ]
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    MyPageRoutingModule,
    UserCreateRoutingModule

  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

my-page-routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyPageComponent } from '../my-page/my-page.component';
import { UserEditComponent } from '../user-edit/user-edit.component';
import { UserEditConfirmComponent } from '../user-edit-confirm/user-edit-confirm.component';
import { UserEditDoneComponent } from '../user-edit-done/user-edit-done.component';
import { UserCreateRoutingModule } from '../user-create/user-create-routing.module';
import { IndexComponent } from '../index/index.component';


const routes: Routes = [
  {
    path:'my-page',
    component: MyPageComponent,
    children:[
      { path: 'user-edit',
        component: UserEditComponent,
        children:[
          { path: 'user-edit-confirm', component: UserEditConfirmComponent },
          { path: 'user-edit-done', component: UserEditDoneComponent }    
        ]
      }
    ]
  },
  { path: 'my-page', component:IndexComponent},
];

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

user-create-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UserCreateComponent } from '../user-create/user-create.component';
import { UserCreateConfirmComponent } from '../user-create-confirm/user-create-confirm.component';
import { UserCreateDoneComponent } from '../user-create-done/user-create-done.component';
import { IndexComponent } from '../index/index.component';


const routes: Routes = [
  { 
    path: 'user-create',
    component: UserCreateComponent,
    children:[
      { path: 'user-create', component: IndexComponent},
      { path: 'user-create-confirm', component: UserCreateConfirmComponent},
      { path: 'user-create-done', component: UserCreateDoneComponent},
    ]
  },
];

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

app-routingモジュールとmy-page-routingモジュールとuser-createモジュールに分けているのは
この後LazyLoardingにも取り掛かろうと考えているからです。

やってみたこと

my-page-routingモジュールの

children:[
  { path: 'user-edit-confirm', component: UserEditConfirmComponent },
  { path: 'user-edit-done', component: UserEditDoneComponent }    
]

の部分ではコンポーネントが切り替わってくれるのでこのようにすれば切り替わってくれるのかと思い
空のコンポーネントを入れてみると、rootの時点で画面が真っ白に(何も表示されていない)なってしますという状況です。

環境

Angular CLI 11.0.5
Node.js 14.15.3

Answer 1

component2の上にからのcomponentを作ってあげると質問のような画面遷移になりました。
htmlの
<router-outlet><router-outlet>はコンポーネントの下にリンク先のコンポーネントをくっつけるというものみたいなので、そこにからのコンポーネントをくっつけるという意味合いになります。