Angular 6/7/8 Nested Child Routes using 'loadChildren()', not displaying

Question

I am learning angular and have started my chapter on routing, I would like my project that I am wokring along side my learning to have individual modules and routes that handle them.

Below is my code to handle routing.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {PatientsDataComponent} from './main-page/main/patients/patients-data/patients-data.component';
import {RightPanelComponent} from './main-page/main/patients/right-panel/right-panel.component';


const routes: Routes = [{
  path: 'patients',
  component: PatientsDataComponent,
  children: [{
    path: '',
    component: RightPanelComponent,
    loadChildren: () => import('./main-page/main/patients/right-panel/right-panel.module').then(m => m.RightPanelModule),
    data: { preload: true }
  }]
  }];

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

And my other routing module looks like this

right-panel-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {EditDetailsComponent} from './edit-details/edit-details.component';
import {AppGuard} from '../../../../app.guard';
import {RightPanelComponent} from './right-panel.component';

const routes: Routes = [{
  path: '',
  component: RightPanelComponent,
  children: [{
    path: 'editDetails/:id',
    component: EditDetailsComponent,
    pathMatch: 'full'
  }]
}];


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

}

What I am trying to do is to show the edit-details.component on click of a dynamic list item which has a router link, while not letting the other views to go away. But all I see is that the right-panel.component loading and the not the edit-details.component which is the child of it. I do that have the <router-outlet> tag in the right-panel html page.

PS: I have added the modules in their respective module to imports array. let me know if I should provide more details or page to help solve this.

See below link for folder structure.

Also this is what my right-module.ts looks like

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {EditDetailsComponent} from './edit-details/edit-details.component';
import {RightPanelRoutingModule} from './right-panel-routing.module';


@NgModule({
  imports: [
    CommonModule,
    RightPanelRoutingModule,
  ],
  declarations: [
    EditDetailsComponent
  ]
})
export class RightPanelModule { }

The HTML page that has router Link

  <div class="pat-list">
    <mat-selection-list [multiple]="false">
      <mat-list-option *ngFor="let pat of patients" [value]="pat.patient_id" [routerLink]="['editDetails', pat.patient_id]" (click)="details(pat)">
        <mat-icon mat-list-icon><img src="{{ pat.photo ? pat.photo : pat.gender == 'male' ? 'assets/images/personIcon.png' : 'assets/images/personIcon.png'}}" style="font-size: 20px;width: 50px; height: 50px;" /></mat-icon>
        <div class="pat-text">
          <div mat-line class="pat-name">{{pat.name}}</div>
          <mat-icon matSuffix>keyboard_arrow_right</mat-icon>
        </div>
        <mat-divider></mat-divider>
      </mat-list-option>
    </mat-selection-list>
  </div>

Adding sample in to public git hub repo. https://github.com/JudahIrani/test

Answer 1

I got the fix, turns out there was <router-outlet> directive missing for the mid panel that would eventually show the right panel. Sorry guys, told you I was new to this! A simplest mistake made me waste 2 days thinking about it.