模块中的组件未显示在app.component模板中

Question

在我在组件中执行所有操作之前，我正在更改角度应用程序的结构，现在我想在模块中更改它们，以便代码更加模块化。我改变了导航和侧边栏模块制造过程中遇到的所有问题。我创建了他们的模块，但这些模块没有加载，应用程序的输出看起来像这样

Html Output

您可以在图片中看到导航和侧边栏选择器中没有任何内容正在加载。如果我加载侧边栏组件和导航组件，然后在引导程序中引用它们，那么这些都是第一次加载，所以我想清楚这是加载这些模块的问题。

app.component文件

// 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 {

}

导航模块文件

// 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 {
}

补充工具栏模块文件

// 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 {
}

在组件结构中，它的工作正常，我不想。 （以下app.component文件）

// 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 {

}

解决方案 正如yurzui在评论中建议删除CUSTOM_ELEMENTS_SCHEMA然后从模块中导出组件解决了我的问题。