Angular Nested Module not loading nested router-outlet

I have an application where I have a application page that displays a list of all the different apps you can view or goes straight into the app that you have access to based off of permissions. I Have that in all of that in a module called AppsModule with a route module like below:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthenticationGuard } from 'src/app/core/guards/authentication/authentication.guard';

import { AppsComponent } from './apps.component';

const routes: Routes = [
  {
    path: '', component: AppsComponent,
    canActivate: [AuthenticationGuard],
    canActivateChild: [AuthenticationGuard],
    children: [
      {
        path: 'users',
        loadChildren: () => import('../admin/user-management/user-management.module').then(m => m.UserManagementModule)
      },
      {
        path: 'books',
        loadChildren: () => import('../admin/book-managament/book-managament.module').then(m => m.BookManagamentModule)
      },
    ]
  },
];

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

In that module I have html like so:

<div class="container-fluid" *ngIf="router.url === '/apps'">
    <div class="row">
        <div class="col">
            <a [routerLink]="['books']" routerLinkActive="router-link-active">Books Application</a>
        </div>
        <div class="col">
            <a [routerLink]="['users']" routerLinkActive="router-link-active">Users</a>
        </div>
    </div>
</div>
<router-outlet *ngIf="router.url !== '/apps'"></router-outlet>

Once you click on one of those apps a module is lazy loaded and in the module I want the router-outlet to have the navigation included in the main component in that module like below:

<app-navigation></app-navigation>
<router-outlet></router-outlet>

Everything compiles fine but when I load that module with the provided url I get the module main component but not the nav component showing. I have everything exporting fine. I can make it work if i put the nav component in the apps module but not the users module for example.

It seems like angular only allows two router outlets. Not sure why my app navigation component is not loading correctly any help would be much appreciated.