Angular form displayed incorrectly in Menu Navigation (when

*Below is what I have when displaying a Form within a Navigation Component (I am trying to create CRUD code to access a table. To do this, I have place 3 Components and 1 module into a directory called "apifefs" (see picture below). Unfortunately, I have been having problems with this *

*When I refresh the page, I get the following (it is as though the Navigation Bar has disappeared). In fact, pretty much everything has disappeared - only the form itself is left *

This is how code is partitioned out for the project

Below is code I am working with. Any help, hints or advice would be greatly appreciated.

TIA

apidefs.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ApidefsDispComponent } from './apidefs-disp/apidefs-disp.component';
import { ApidefsListComponent } from './apidefs-list/apidefs-list.component';
import { ApidefsFormComponent } from './apidefs-form/apidefs-form.component';
import { ReactiveFormsModule } from '@angular/forms';

// 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 { FlexLayoutModule } from '@angular/flex-layout';
import { MatFormFieldModule, MatInputModule  } from '@angular/material';

import { MatDialogModule } from '@angular/material';
import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';
import {  HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [ApidefsDispComponent, ApidefsListComponent, ApidefsFormComponent],
  exports: [ ],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    CommonModule,
    HttpClientModule,
    SidenavModule,
    MDBBootstrapModulesPro.forRoot(),
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    FlexLayoutModule,
    ReactiveFormsModule,
    CommonModule,
    MDBBootstrapModulesPro,
    ButtonsModule,
    AccordionModule,
    CardsModule,
    CheckboxModule,
    IconsModule,
    InputsModule.forRoot()
  ],
  providers: [
    MDBSpinningPreloader
  ]
})
export class ApidefsModule { }

dashboard-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNotFoundComponent } from '../../page-not-found/page-not-found.component';
import { HomeComponent } from './home/home.component';
import { ClientsComponent } from './clients/clients.component';
import { StockchartComponent } from './stockchart/stockchart.component';
import { ApidefsDispComponent } from '../common/apidefs/apidefs-disp/apidefs-disp.component';

export const dashboardroutes: Routes = [

    { path: 'landing/:id', component: HomeComponent,
        children: [
            { path: 'clients', component: ClientsComponent, outlet: 'contentarea'  },
            { path: 'stockchart', component: StockchartComponent, outlet: 'contentarea'  },
            { path: 'apidefs', component: ApidefsDispComponent, outlet: 'contentarea'  },
        ]},
];


@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';
import { HttpClientModule } from '@angular/common/http';
import { tradersApiService } from '../shared/services/traders.api.service';
import { PageNotFoundComponent } from  '../../page-not-found/page-not-found.component';
import { StockchartComponent } from './stockchart/stockchart.component';
import { NgApexchartsModule } from "ng-apexcharts";
import { ApidefsModule } from '../common/apidefs/apidefs.module';

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

})
export class DashboardModule { }