This is hour 10, I’ve tried 20 differnet configurations. the first set works fine. the children under company only evaluates

localhost:4200/Employee-pub/1 -> localhost:4200/Employee-pub/1

localhost:4200/todo -> localhost:4200/todo

localhost:4200/company -> localhost:4200/company

localhost:4200/company/details -> Cannot match any routes

localhost:4200/company/employees -> Cannot match any routes

localhost:4200/company/employee/:id -> Cannot match any routes

If I change details to company-details to ” then I get child component rendering company-details correctly but It never recognizes the anything but anything after /company/.

company-main.module.ts

        import { EmployeesComponent } from './components/employees/employees.component';
        import { CompanyComponent } from './components/company/company.component';
        import { EmployeeEditComponent } from './components/employee-edit/employee-edit.component';
        import { Routes, RouterModule } from '@angular/router';
        import { CompanyMainComponent } from './company-main.component';
        import { NgModule } from '@angular/core';
        // navigate to the todos component
        import { AmplifyAuthenticatorModule, AuthenticatorService } from '@aws-amplify/ui-angular';
        
        export const routes: Routes = [
          { path: 'company',
          component: CompanyMainComponent ,
          children:[
            {
              path: './employee/:id',
              component: EmployeeEditComponent,
              outlet:'employee-edit'
            },
            {
              path: 'details',
              component: CompanyComponent,
              outlet:'company-details'
            },
            {
              path: './employees',
              component: EmployeesComponent,
              outlet:'employees'
            },
            // {
            //   path: '**',
            //   redirectTo:'details'
            // },
          ]
           }
        
        
        
        ];
        
        
        @NgModule({ 
          declarations: [
            EmployeesComponent,
            CompanyComponent,
            EmployeeEditComponent,
            CompanyMainComponent,
        
          ],
          imports: [
              RouterModule.forChild(routes),
              AmplifyAuthenticatorModule],
          exports: [ RouterModule ]
        })
        
        export class CompanyRoutingModule { }

app.module.ts

        import { Routes, RouterModule , RouterOutlet} from '@angular/router';
        // navigate to the todos component
        import { TodosComponent } from './todos/todos.component';
        import { EmployeePublicComponent } from './employee-public/employee-public.component';

        // import { CompanyComponent } from './company-main/components/company/company.component';
     
        // import { CompanyMainComponent } from './company-main/company-main.component';
        import { CompanyRoutingModule } from './company-main/company-main.routing';
        import { NgModule } from '@angular/core';
        import { AmplifyAuthenticatorModule, AuthenticatorService } from '@aws-amplify/ui-angular';
        import { AppComponent } from './app.component';
        import { BrowserModule } from '@angular/platform-browser';
        
        export const routes: Routes = [
        
             { path: 'employee-pub/:id', component: EmployeePublicComponent },
             // { path: '**',component: TodosComponent },
             { path: 'todo',component:TodosComponent }
          ];
        
          @NgModule({
            imports: [
              RouterModule.forRoot(routes),
              CompanyRoutingModule,
              RouterOutlet,
        BrowserModule,
              AmplifyAuthenticatorModule 
          ],
            declarations: [
              AppComponent,
              TodosComponent
            ],
            bootstrap: [ AppComponent ],
            exports: [ RouterModule ]
        
        })
        export class AppRoutingModule { } 

company-main.component.ts

         <router-outlet></router-outlet>

app.component.ts

         <router-outlet></router-outlet>

Id like for the details, employees, employee/:id screens to render when navigating under company/anything, instead, the router reads will not match nested children.