Component from Module is not showing in app.component template

Question

I am changing the structure of angular app before I am doing everything in components and now I want to change them in the modules so that the code is more modular. I change everything just facing problems in making of navigation and sidebar module. I made their modules but these are not loading and the output of the application look like this

Html Output

You can see in picture that nothing is loading inside navigation and sidebar selectors. If I load sidebar component and navigation component and then reference them in bootstrap then these are loaded just first time so I think clearly it is the problem of loading of these modules.

app.component file

// Modules Default
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';


//Routing
import {AppRoutingModule} from './app.routes'

//My Modules
import {NavigationModule} from './shared/navigation/navigation.module';
import {SidebarModule} from "./shared/sidebar/sidebar.module";
import {LoginModule} from './pages/login/login.module';
import {ForgotPasswordModule} from './pages/forgot-password/forgot-password.module';
import {CommsModule} from './pages/comms/comms.module';
import {DashboardModule} from './pages/dashboard/dashboard.module';
import {EventModule} from './pages/event/event.module';
import {OverviewModule} from './pages/overview/overview.module';
import {PricingModule} from './pages/pricing/pricing.module';
import {SignUpModule} from './pages/sign-up/sign-up.module';
import {UserCardsModule} from './pages/user-cards/user-cards.module';
import {UsersModule} from './pages/users/users.module';

// Services
import {FunctionsService} from "./services/Functions/functions.service";


//Component
import {AppComponent}  from './app.component';
import {PageNotFoundComponent} from './pages/page-not-found/page-not-found.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,


        NavigationModule,
        SidebarModule,
        LoginModule,
        ForgotPasswordModule,
        SignUpModule,
        CommsModule,
        DashboardModule,
        EventModule,
        OverviewModule,
        PricingModule,
        UserCardsModule,
        UsersModule,
        AppRoutingModule,

    ],

    declarations: [AppComponent, PageNotFoundComponent,
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ],

    bootstrap: [AppComponent],

    providers: [
        {
            provide: LocationStrategy, useClass: HashLocationStrategy
        },
        FunctionsService
    ]

})
export class AppModule {

}

Navigation Module File

// System Imports
import {NgModule} from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {CommonModule} from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import {SlimScrollModule} from '../../modules/slim-scroll.module'

//My Imports
import {NavigationComponent} from './navigation.component'

@NgModule({
    imports: [
        NgbModule.forRoot(),
        CommonModule,
        ReactiveFormsModule,
        SlimScrollModule
    ],
    declarations: [
        NavigationComponent,
    ],
    providers: []
})
export class NavigationModule {
}

Sidebar Module File

// System Imports

import {NgModule} from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {CommonModule} from '@angular/common';
import {DataTablesModule} from 'angular-datatables';
import {MultiSelectModule} from 'primeng/primeng';
import {jqxDateTimeInputComponent} from 'jqwidgets-framework/jqwidgets-ts/angular_jqxdatetimeinput';
import {RouterModule} from '@angular/router';
import {ReactiveFormsModule, FormsModule} from '@angular/forms';


//My Imports
import {SlimScrollModule} from '../../modules/slim-scroll.module';
import {SidebarComponent} from './sidebar.component';
import {AddEventComponent} from '../../shared/popups/add-event/add-event.component';
import {AddNewMemberComponent} from '../../shared/popups/add-new-member/add-new-member.component';
import {AddSubscriptionComponent} from '../../shared/popups/add-subscription/add-subscription.component';
import {AddVirtualCardsComponent} from '../../shared/popups/add-virtual-cards/add-virtual-cards.component';
import {CurrentStatusReasonComponent} from '../../shared/popups/current-status-reason/current-status-reason.component';
import {GatewayDetailComponent} from '../../shared/popups/gateway-detail/gateway-detail.component';
import {InvoiceComponent} from '../../shared/popups/invoice/invoice.component';
import {MemberDetailComponent} from '../../shared/popups/member-detail/member-detail.component';
import {OrganizationComponent} from '../../shared/popups/organization/organization.component';
import {PaymentsComponent} from '../../shared/popups/payments/payments.component';
import {ProfileSettingsComponent} from '../../shared/popups/profile-settings/profile-settings.component';
import {ReportsComponent} from '../../shared/popups/reports/reports.component';
import {ShowCardComponent} from '../../shared/popups/show-card/show-card.component';
import {SiteSettingsComponent} from '../../shared/popups/site-settings/site-settings.component';
import {UpdateSubscriptionComponent} from '../../shared/popups/update-subscription/update-subscription.component';
import {VirtualCardsComponent} from '../../shared/popups/virtual-cards/virtual-cards.component';
import {MembersListComponent} from '../../shared/popups/members-list/members-list.component';
import {AddUserComponent} from '../../shared/popups/add-user/add-user.component';

@NgModule({
    imports: [
        NgbModule.forRoot(),
        RouterModule,
        ReactiveFormsModule, FormsModule,
        CommonModule,
        DataTablesModule,
        MultiSelectModule, //Prime NG

        //My Imports
        SlimScrollModule
    ],
    declarations: [
        SidebarComponent,
        jqxDateTimeInputComponent,

        //Childs
        AddEventComponent, AddNewMemberComponent, AddSubscriptionComponent,
        AddVirtualCardsComponent, CurrentStatusReasonComponent, GatewayDetailComponent, InvoiceComponent, MemberDetailComponent,
        OrganizationComponent, PaymentsComponent, ProfileSettingsComponent, ReportsComponent, ShowCardComponent, SiteSettingsComponent,
        UpdateSubscriptionComponent, VirtualCardsComponent,
        OrganizationComponent, MembersListComponent, AddUserComponent,
    ],
    providers: []
})
export class SidebarModule {
}

In Component Structure its working fine which I don't want. (app.component file below)

// Modules Default
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-
browser/animations';
import {ReactiveFormsModule, FormsModule} from '@angular/forms'
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

//Modules Plugins
import {DataTablesModule} from 'angular-datatables';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {MultiSelectModule, FileUploadModule} from 'primeng/primeng';
import {SlimScroll} from 'angular-io-slimscroll';
import {jqxDateTimeInputComponent} from 'jqwidgets-framework/jqwidgets-

ts/angular_jqxdatetimeinput';

//Routing
import {AppRoutingModule} from './app.routes'

//My Modules
// import {NavigationModule} from './shared/navigation/navigation.module';
// import {SidebarModule} from "./shared/sidebar/sidebar.module";
import {LoginModule} from './pages/login/login.module';
import {ForgotPasswordModule} from './pages/forgot-password/forgot-password.module';
import {CommsModule} from './pages/comms/comms.module';
import {DashboardModule} from './pages/dashboard/dashboard.module';
import {EventModule} from './pages/event/event.module';
import {OverviewModule} from './pages/overview/overview.module';
import {PricingModule} from './pages/pricing/pricing.module';
import {SignUpModule} from './pages/sign-up/sign-up.module';
import {UserCardsModule} from './pages/user-cards/user-cards.module';
import {UsersModule} from './pages/users/users.module';

// Services
import {FunctionsService} from "./services/Functions/functions.service";


//Component
import {AppComponent}  from './app.component';
import {PageNotFoundComponent} from './pages/page-not-found/page-not-found.component';
//Seperate Modules are not Working
import {NavigationComponent} from './shared/navigation/navigation.component';
import {SidebarComponent} from './shared/sidebar/sidebar.component';
import {AddEventComponent} from './shared/popups/add-event/add-event.component';
import {AddNewMemberComponent} from './shared/popups/add-new-member/add-new-member.component';
import {AddSubscriptionComponent} from './shared/popups/add-subscription/add-subscription.component';
import {AddVirtualCardsComponent} from './shared/popups/add-virtual-cards/add-virtual-cards.component';
import {CurrentStatusReasonComponent} from './shared/popups/current-status-reason/current-status-reason.component';
import {GatewayDetailComponent} from './shared/popups/gateway-detail/gateway-detail.component';
import {InvoiceComponent} from './shared/popups/invoice/invoice.component';
import {MemberDetailComponent} from './shared/popups/member-detail/member-detail.component';
import {OrganizationComponent} from './shared/popups/organization/organization.component';
import {PaymentsComponent} from './shared/popups/payments/payments.component';
import {ProfileSettingsComponent} from './shared/popups/profile-settings/profile-settings.component';
import {ReportsComponent} from './shared/popups/reports/reports.component';
import {ShowCardComponent} from './shared/popups/show-card/show-card.component';
import {SiteSettingsComponent} from './shared/popups/site-settings/site-settings.component';
import {UpdateSubscriptionComponent} from './shared/popups/update-subscription/update-subscription.component';
import {VirtualCardsComponent} from './shared/popups/virtual-cards/virtual-cards.component';
import {MembersListComponent} from './shared/popups/members-list/members-list.component';
import {AddUserComponent} from './shared/popups/add-user/add-user.component';

@NgModule({
    imports: [
        BrowserModule,
        NgbModule.forRoot(),



 //My Modules
    // NavigationModule,
    // SidebarModule,
    LoginModule,
    ForgotPasswordModule,
    SignUpModule,
    CommsModule,
    DashboardModule,
    EventModule,
    OverviewModule,
    PricingModule,
    UserCardsModule,
    UsersModule,
    AppRoutingModule,

    DataTablesModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    FormsModule,
    MultiSelectModule, //Prime NG
    FileUploadModule, //PrimeNG
],

declarations: [AppComponent, PageNotFoundComponent,
    //Seperate Modules are not Working
    SidebarComponent, AddEventComponent, AddNewMemberComponent, AddSubscriptionComponent,
    AddVirtualCardsComponent, CurrentStatusReasonComponent, GatewayDetailComponent, InvoiceComponent, MemberDetailComponent,
    OrganizationComponent, PaymentsComponent, ProfileSettingsComponent, ReportsComponent, ShowCardComponent, SiteSettingsComponent,
    UpdateSubscriptionComponent, VirtualCardsComponent, SlimScroll,
    OrganizationComponent, MembersListComponent, jqxDateTimeInputComponent, AddUserComponent, NavigationComponent,
],
schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

bootstrap: [AppComponent],

providers: [
    {
        provide: LocationStrategy, useClass: HashLocationStrategy
    },
    FunctionsService
]

})
export class AppModule {

}

Solution As yurzui suggested in comments removing CUSTOM_ELEMENTS_SCHEMA and then exporting the component from module solved my problem.