app.component.html

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <div class="container">
        <a class="navbar-brand">Angular Router</a>
        <ul class="nav navbar-nav" routerLinkActive="active">
            <li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
            <li class="nav-item"><a class="nav-link" routerLink="about">About</a></li>
            <li class="nav-item"><a class="nav-link" routerLink="courses">Courses</a></li>
        </ul>
    </div>
</nav>

<router-outlet></router-outlet>

course-cards.component.ts

@Component({
  selector: 'app-course-cards',
  templateUrl: './course-cards.component.html',
  styleUrls: ['./course-cards.component.css']
})
export class CourseCardsComponent {

  constructor(private router: Router, private route: ActivatedRoute) {

  }
    
    navigate(path) {
        this.router.navigate([{outlets: {primary: path, sidemenu:path}}], 
                             {relativeTo: this.route});
    }

}

course-section-navigation.ts

    <div class="col-xs-6 col-lg-4">
        <h2>Development</h2>
        <p>...</p>
        <p><a class="btn btn-secondary" (click)="navigate('development')"  role="button">View details »</a></p>
    </div>

course-sub-categories-1.config.ts

    {
        path: 'courses',
        component: CoursesComponent,
        children: [
            {
                path: '',
                component: CourseCardsComponent
            },
            {
              path: ':id',
              component: CoursesCategoryComponent
            },
            {
                path: '',
                outlet: 'sidemenu',
                component: SideMenuComponent
            }
        ]
    }

course-sub-categories-2.config.ts

{
        path: 'courses',
        component: CoursesComponent,
        children: [
            {
                path: '',
                component: CourseCardsComponent
            },
            // ++ THIS PART WAS ADDED
            {
              path: ':id',
              component: CoursesCategoryComponent
            },
            // -- THIS PART WAS ADDED
            {
                path: '',
                outlet: 'sidemenu',
                component: SideMenuComponent
            },
            {
                path: ':id',
                outlet: 'sidemenu',
                component: SideMenuComponent
            }
        ]
    }

courses.component.html

<main>
    <div class="container">
        <div class="row row-offcanvas row-offcanvas-right">
            <div class="col-xs-12 col-sm-9">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
                    <li class="breadcrumb-item active">Courses</li>
                </ol>
                <div class="jumbotron">
                    <h1>Course Categories!</h1>
                    <p>This is a list of course categories, click on each to see a list of courses for a given category.</p>
                </div>
                <router-outlet></router-outlet>
            </div>
            <router-outlet name="sidemenu"></router-outlet>
        </div>
    </div>
</main>

nested-child-route.config.ts

{
        path: 'courses',
        component: CoursesComponent,
        children: [
            {
                path: '',
                component: CourseCardsComponent
            }
        ]
    }

router-sub-section.config.ts

    <div class="col-xs-6 col-lg-4">
        <h2>Development</h2>
        <p>... </p>
        <p><a class="btn btn-secondary" routerLink="development"  role="button">View details »</a></p>
    </div>
    <div class="col-xs-6 col-lg-4">
        <h2>IT & Software</h2>
        <p>... </p>
        <p><a class="btn btn-secondary" routerLink="it-software" role="button">View details »</a></p>
    </div>

side-menu.component.ts

@Component({
  selector: 'app-categories-menu',
  templateUrl: './categories-menu.component.html',
  styleUrls: ['./categories-menu.component.css']
})
export class SideMenuComponent {

  constructor(route: ActivatedRoute) {

      route.params.subscribe(params => console.log("side menu id parameter",params['id']));

  }
}

side-menu.config.ts

{
        path: 'courses',
        component: CoursesComponent,
        children: [
            {
                path: '',
                component: CourseCardsComponent
            },
            {
                path: '',
                outlet: 'sidemenu',
                component: SideMenuComponent
            }
        ]
    }

top-menu.config.ts

export const routerConfig: Routes = [
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'about',
        component: AboutComponent
    },
    {
        path: 'courses',
        component: CoursesComponent
    },
    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    },
    {
        path: '**',
        redirectTo: '/home',
        pathMatch: 'full'
    }
];