Angular 8 - Children component not rendering

Question

I have three routes the first one including two children, first child is getting rendered but the second child is not rendered, inside url I am getting full address to it, but no templates are showing, in fact it shows its parent template, if I added router-outlet it renders both of them which I don't want to.

Here is the second route and its children:

const routes: Routes = [
    {
        path: 'temp-details',
        component: TempDetailsComponent,
        children: [
            {
                // The problem is here
                // This component not rendering in its parent TempDetails 
                path: 'temp-credit',
                component: TempCreditComponent,
                data: {
                    title: extract('Temp credit')
                }
            }
        ],
        data: {
            title: extract('Temp details')
        }
    }
];

This goes inside temp-credit.routing.ts:

const routes: Routes = [
    {
        path: '',
        component: TempCreditComponent,
        data: {
            title: extract('Temp credit')
        }
    }
];

temp-details.module.ts

@NgModule({
    declarations: [TempDetailsComponent],
    imports: [
        CommonModule,
        TempDetailsRoutingModule,
        MaterialModule,
        TranslateModule,
        FlexLayoutModule,
        ReactiveFormsModule,
        PageHeaderModule,
        TempCreditModule,
    ],
})
export class TempDetailsModule { }

temp-credit.module.ts

@NgModule({
    declarations: [TempCreditComponent],
    imports: [
        CommonModule,
        TempCreditRoutingModule,
        TranslateModule,
        MaterialModule,
        ReactiveFormsModule,
        FlexLayoutModule,
        PageHeaderModule,
    ]
})
export class TempCreditModule { }

The TempCreditModule is included in both app.module.ts and temp-details.module.ts, also the component is already declared inside its own module.

The breadcrumb of this component looks like this:

Home > credits > temp-details > temp-credit

Answer 1

I solve this by creating several objects, each object has a more internal route and at the same time I deleted the components of the previously created routes

const routes: Routes = [
    {
    path:'parent',
    component: ParentComponent
    },
    {
    path: 'parent',
    children: [
      {
        path: 'child',
        component: DetailsComponent,
        data: { title: ''}
       },
      ],
        
    },

{
    path: 'parent',
    children: [
      {
        path: 'child',
        children:[
           {path:'child-child',component:ChildChildComponent}   ///and so on
          ]

       },
      ],
        
    }
    ];

Answer 2

You have to have a router-outlet in TempDetailsComponent, as that's where the route children are rendered. It can happen, that there's nothing else but the router-outlet in TempDetailsComponent.

Something like this:

const routes: Routes = [
    {
        path: 'temp-details',
        component: TempParentComponent, // <- this contains only a `router-outlet`
        children: [
            {
                path: '',
                component: TempDetailsComponent, // <- contains the actual page
                data: {
                    title: extract('Temp credit')
                }
            },
            {
                path: 'temp-credit',
                component: TempCreditComponent, // <- contains the actual page
                data: {
                    title: extract('Temp credit')
                }
            }
        ],
        data: {
            title: extract('Temp details')
        }
    }
];