Ionic Angular: Children Do Not Get Rendered

Ionic Framework
1

So this is my app-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    canActivate: [RegisteredGuard],
    loadChildren: () =>
      import('./tabs/tabs.module').then((m) => m.TabsPageModule),
  },
  {
    path: 'admin',
    canActivate: [RegisteredGuard],
    loadChildren: () =>
      import('./admin/admin.module').then((m) => m.AdminPageModule),
  },
  {
    path: 'login',
    loadChildren: () =>
      import('./account/login/login.module').then((m) => m.LoginPageModule),
  }
];

This is my structure:

structure

This is my admin-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: AdminPage,
    children: [
      {
        path: 'account',
        loadChildren: () =>
          import('./account/manage-account/manage-account.module').then(
            (m) => m.ManageAccountPageModule
          ),
      },
      {
        path: '',
        redirectTo: '/admin/account',
        pathMatch: 'full'
      }
    ],
  },
  {
    path: '',
    redirectTo: '/admin/account',
    pathMatch: 'full'
  }
];

When I type /admin/account it should render the component from /admin/account/manage-account. The problem is that my /admin/account/manage-account is not being rendered.

The /admin.page.html is being rendered tho. So I guess the routing until /admin is correct, but the children of /admin/... routing do not get rendered.

Please help

UPDATE

This is my /admin/account/manage-account/manage-account-routing.module.ts:

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

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

Also this is my manage-account.module.ts:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ManageAccountPageRoutingModule,
  ],
  declarations: [ManageAccountPage],
})
export class ManageAccountPageModule {
  constructor() {
    console.log('HEREEEE');
  }
}

Weirdly enough, the console.log('HEREEEE') is working, it is getting called. But all the codes from manage-account.page.ts does not get ran at all.

2

So this is weird. My admin.page.html was this:

<app-admin-menu></app-admin-menu>

This will not render the children. After I put ion-tabs like this:

<app-admin-menu></app-admin-menu>
<ion-tabs></ion-tabs>

Then this renders the children correctly. I do not want to use ion-tabs to wrap the children. Can anyone explain to me why this is working? What should I do if I want to remove the ion-tabs from wrapping the children? Should I use another component to wrap my children?