我如何将延迟加载模块中的组件用作其他未延迟加载的组件中的子组件？

Question

I have one lazy loaded module.Part of that module is CreateEmployeeComponent.I have also home component which is not lazy loaded,it's route path is defined in the app-routing.module.ts file.When i try to use the CreateEmployeeComponent as child in the Home component i get error app-create-employee is not a known element which is expected because app.module.ts dont know nothing about that CreateEmployeeComponent is declared in the declarations array in my EmployeeModule.If i dont use lazy loading i will insert the EmployeeModule in the app.module.ts file and the error will be fixed.I can't insert now EmployeeModule in my app.module.ts because then he will not be lazy loaded.

How can i solve this problem?

//app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PageNotFoundComponent,

  ],
  imports: [
    BrowserModule,
    SharedModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


// app-routing.module.ts

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  {path:'employees' , data: {preload:true}, loadChildren:'./modules/employee/employee.module#EmployeeModule'},
  { path: '**', component: PageNotFoundComponent },
];


//employee-routing.module.ts

const routes: Routes = [

    { path: '', component: ListEmployeesComponent },
    { path: 'create', component: CreateEmployeeComponent },
    { path: 'edit/:id', component: CreateEmployeeComponent },
];

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


//employee.module.ts

@NgModule({
  imports: [
    EmployeeRoutingModule,
    SharedModule
  ],
  declarations: [
    CreateEmployeeComponent,
    ListEmployeesComponent,
    CompoWithChildrensComponent,
    ChildrenOneComponent,
    ChildrenTwoComponent
  ],
  exports:[
    CreateEmployeeComponent
  ]
})
export class EmployeeModule { }

Answer 1

Because AppModule uses a component from EmployeeModule , you have to import EmployeeModule .

You can split EmployeeModule in two modules; one module with CreateEmployeeComponent and one module with the rest. You can than import the first module and lazy load the second.

You have to determine for yourself if this is practical and useful for your app.