Use of multiple <router-outlet> under Angular Material (8) is not working

I am working with Angular Material (8) – along with the MDBootstrap package. I am attempting to set up a Sidebar with a menu. The idea is that when clicking on a Menu item, the area in the center should change. For example, clicking on “Charts” Menu Item would change the “center area” so that Charts are listed. Clicking on “Clients” Menu Item would change the “center area” so that a list of Clients are shown.

What I am getting … instead … is that clicking on a Menu item does nothing.

When I click on the Menu Item: “Press for Clients”, it does not work. I get nothing at all – not even in the console.

enter image description here

This is the setup I have:

enter image description here

Below are the files being used. Why is this not working? Any help, hints or advice would be appreciated!

TIA

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { AuthorizationModule } from './kdc/authorization/authorization.module';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  //{ path: '**', component: PageNotFoundComponent }
  //{ path: 'auth', loadChildren: './projects/projects.module#ProjectsModule', canActivate: [AuthGuard]},
  { path: 'auth', loadChildren: './kdc/authorization/authorization.module#AuthorizationModule' },
  { path: 'dashboard', loadChildren: './kdc/dashboard/dashboard.module#DashboardModule' },
  { path: '**' , component: PageNotFoundComponent }

];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule],
})

export class AppRoutingModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import 'hammerjs';


import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';


@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    CommonModule,
    AppRoutingModule,
    BrowserAnimationsModule, 
    MDBBootstrapModulesPro.forRoot()
  ],
  providers: [ MDBSpinningPreloader ],
  bootstrap: [AppComponent]
})
export class AppModule { }

dashboard-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// components that need to be navigated to
import { HomeComponent } from './home/home.component';
import { ClientsComponent } from './clients/clients.component';


const dashboardroutes: Routes = [
  { path: "", component: HomeComponent },
  { path: "clients", component: ClientsComponent  },
];


@NgModule({
  imports: [ RouterModule.forChild(dashboardroutes) ],
  exports: [ RouterModule ],
  declarations: [   ]
})
export class DashboardRoutingModule { }
export const dashboardRoutingComponents = [HomeComponent, ClientsComponent]

dashboard.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// put everything in the Router
import { DashboardRoutingModule } from './dashboard-routing.module';
import { dashboardRoutingComponents } from './dashboard-routing.module';

// items that go with the Component
import { AccordionModule } from 'ng-uikit-pro-standard';
import { CardsModule } from 'ng-uikit-pro-standard';
import { CheckboxModule } from 'ng-uikit-pro-standard';
import { IconsModule } from 'ng-uikit-pro-standard';
import { ButtonsModule } from 'ng-uikit-pro-standard';
import { InputsModule } from 'ng-uikit-pro-standard';
import { SidenavModule } from 'ng-uikit-pro-standard';
import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatFormFieldModule, MatInputModule } from '@angular/material';
import { MatDialogModule } from '@angular/material';
import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';


@NgModule({
  declarations: [dashboardRoutingComponents],  
  exports: [dashboardRoutingComponents],
  imports: [
    CommonModule,
    SidenavModule,
    DashboardRoutingModule,
    MDBBootstrapModulesPro.forRoot(),
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    MDBBootstrapModulesPro,
    ButtonsModule,
    AccordionModule,
    CardsModule,
    CheckboxModule,
    IconsModule,
    InputsModule.forRoot()
  ],
  providers: [
    MDBSpinningPreloader
  ]

})
export class DashboardModule { }

home.component.html (see the attached picture)

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

clients.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.scss']
})
export class ClientsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Source: New feed
Source Url Use of multiple <router-outlet> under Angular Material (8) is not working