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

Angular 4 Eager或lazy load - SharedModule无法正常工作

1 个答案: