Grand Child route not activating in angular

I have been trying to get a grand-child route to work in angular. Read through the docs and found a bunch of answers here.

I am lazy loading a module with 3 components. I am looking to achieve a hierarchy of deployments > release > job.

deployments is a list view release is the details view (has many jobs) job is job details view

My App Routing:

import { Routes } from '@angular/router';
import { AuthGuard } from './shared/auth.guard';

export const rootRouterConfig: Routes = [
  {
    path: '',
    redirectTo: 'deployments',
    pathMatch: 'full'
  },
  {
    path: 'deployments',
    loadChildren: () => import('./deployment/deployment.module').then((m) => m.DeploymentModule),
    canActivate: [AuthGuard]
  }
]

the deployment module routing:

    export const DeploymentRoutes: Routes = [
  {
    path: '',
    component: DeploymentComponent,
    children: [
      {
        path: '',
        component: ListDeploymentsComponent,

        data: { breadcrumb: { alias: 'deployments' } },
      },
      {
        path: ':release',
        component: DeploymentDetailsComponent,
        children: [
          {
            path: ':jobId',
            component: JobDetailsComponent
          }
        ]
      },

    ],
  },
];

the list comes up fine. I am able to get to my deployment details with this:

  public viewDeploymentDetails(deployment: Deployment) {
     this.router.navigate([`./${deployment.release}`], { relativeTo: this.route});
  }

I cannot get to the JobDetailsComponent from the DeploymentDetailsComponent

  public viewJobDetails(job: Job) {
     this.router.navigate([`./${job.id}`], { relativeTo: this.route});
 }

The breadcrumb I have in place is working correctly - but the component never loads?