Angular 4急切或延迟加载 - SharedModule不能正常工作

Question

我无法让我的DropSelectComponent共享组件在loadChildren Contact或Support模块中工作。它无论是急于加载还是延迟加载都不起作用。 DropSelect组件是服务模块的一部分，并在受保护的模块 - layoutcomponent中正常加载。请指教？

Protected.routes.ts

const protectedRoutes: Routes = [ 
     { 
     path: 'protected', 
     component: LayoutComponent, 
     canActivate: [AuthGuard], 
     children:[ 
      { path:'', redirectTo: 'contact', pathMatch:'full'}, 
      { path:'support', loadChildren:() => SupportModule}, 
      { path:'contact', loadChildren:() => ContactModule}, 
      // { path:'support', loadChildren:'./support/support.module#SupportModule'}, 
      // { path:'contact', loadChildren:'./support/contact.module#ContactModule'}, 
     ] 
     } 
    ]; 

    @NgModule({ 
     imports: [RouterModule.forRoot(protectedRoutes)], 
     exports: [RouterModule] 
    }) 
    export class ProtectedRouteModule { } 

Protected.module.ts

@NgModule({ 
    imports: [BasicModule, ServicesModule, ProtectedRouteModule], 
    exports: [], 
    schemas: [CUSTOM_ELEMENTS_SCHEMA], 
    declarations: [ 
     LayoutComponent 
     ], 
    providers: [LayoutService], 
}) 
export class ProtectedModule { } 

Support.module

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { DashboardComponent } from './dashboard/dashboard.component'; 
import { DashboardCardsComponent } from './dashboard/dashboard-cards.component'; 
import { DashboardTableComponent } from './dashboard/dashboard-table.component'; 
import { SupportRouteModule } from './support.routes'; 

@NgModule({ 
    imports: [SupportRouteModule], 
    declarations: [ 
     DashboardComponent, DashboardCardsComponent, DashboardTableComponent 
    ], 
    exports: [], 
    schemas: [CUSTOM_ELEMENTS_SCHEMA], 
    providers: [], 
}) 
export class SupportModule { } 

支持的路由

const routes: Routes = [ 
    { path:'', redirectTo: 'dashboard', pathMatch:'full'}, 
    { 
    path: 'dashboard', component: DashboardComponent, children:[ 
     { path: '', component: DashboardCardsComponent}, 
     { path: 'table', component: DashboardTableComponent}, 
    ] 
    } 

]; 


@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 

export class SupportRouteModule { } 

服务模块

@NgModule({ 
    imports: [CommonModule, HttpModule, FormsModule, RouterModule, MyDatePickerModule], 
    declarations: [LoaderComponent, PagerComponent, FullScreenDirective, DashPipe, CutPipe, SearchPipe, DropSelectComponent], 
    exports: [CommonModule, HttpModule, FormsModule, RouterModule, LoaderComponent, PagerComponent, DashPipe, CutPipe, SearchPipe, DropSelectComponent], 
    providers: [LoaderService, SessionStorage, LocalStorage, ClockService, StorageService, 
      { 
      provide: HttpService, 
      useFactory: HttpServiceFactory, 
      deps: [XHRBackend, RequestOptions, Router, LoaderService, StorageService] 
      }, 
    ], 
    schemas: [CUSTOM_ELEMENTS_SCHEMA], 
}) 
export class ServicesModule { } 

Answer 1

你有没有在你的support.module其导入。做到这一点，它应该工作：

@NgModule({ 
    imports: [SupportRouteModule, ServicesModule], // Here 
    declarations: [ ... ], 
    exports: [], 
    schemas: [CUSTOM_ELEMENTS_SCHEMA], 
    providers: [], 
}) 
export class SupportModule { }