Angular routing with modules - Not showing content for routes

I've been struggling with this annoying issue for a few days now and simply can't figure it out. Hoping someone can pick up my mistake as I am sure its something small.

Content for my routes in one of my modules are not showing, and are acting weird. When the route is /dashboard the dashboard components successfully shows, however when I navigate to another route like /dashboard/status the same content displays and the status component is not shown. If I change the route to just /status then the status component content shows, but it removes all of the dashboard layout components like the sidebar, navbar, etc.

Below is my app-routing.module.ts

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

import { layoutRoutes } from './modules/landing-layout/landing-layout-routing.module';

import { AccountDetailResolve } from './services/account/account-detail.resolve.service';
import { LandingLayoutComponent } from './modules/landing-layout/landing-layout.component';
import { DashboardLayoutComponent } from './modules/dashboard-layout/dashboard-layout.component';

const routes: Routes = [
    {
        path: '',
        component: LandingLayoutComponent,
        children: layoutRoutes
    },
    {
        path: 'dashboard',
        component: DashboardLayoutComponent,
        loadChildren: () => import('./modules/dashboard-layout/dashboard-layout.module')
            .then(m => m.DashboardLayoutModule),
    },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: [
        AccountDetailResolve
    ]
})
export class AppRoutingModule { }

This is my dashboard-layout-routing.module.ts. As seen below, there are two types of dashboards. One for administrators, and one for customers. Each use their own outlet in the dashboard-layout.component.html

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { adminRoutes } from '../admin/admin-routing.module';
import { AdminComponent } from '../admin/admin.component';
import { customerRoutes } from '../customer/customer-routing.module';
import { CustomerComponent } from '../customer/customer.component';

const routes: Routes = [
    {
        path: '',
        component: AdminComponent,
        outlet: 'admin',
        children: adminRoutes
    },
    {
        path: '',
        component: CustomerComponent,
        outlet: 'customer',
        children: customerRoutes
    }
];

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

And finally this is my customer-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AccountStatusComponent } from './components/account-status/account-status.component';
import { CustomerIndexComponent } from './components/index/customer-index/customer-index.component';

export const customerRoutes: Routes = [
    {
        path: '',
        component: CustomerIndexComponent,
    },
    {
        path: 'status',
        component: AccountStatusComponent, 
    },
];

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

So basically, app goes to dashboard-layout and then to customer. As previously mentioned the blank path path: '' is working and showing the dashboard correctly, but when changing to the status, it remains on the dashboard, even though the url changes to /dasboard/status

I hope this is enough information to assist. Please advise if you need more.

EDIT

Here's a simple StackBlitz example of what I am trying to do.