Angular：延迟加载子模块并将其主要组件注入到“父home”组件的“视图”中

Question

I have a parent module where i'm lazy loading a child module

As you may see , i don't import my child module directly , but i'm loading it lazily under routing file :

Parent Module :

@NgModule({
  imports: [
    CommonModule,
    ParentRoutingModule,
  ],
  exports: [
    ParentRoutingModule
  ],

  declarations: [ParentComponent]
})
export class ParentModule { }

Parent Routing Module :

const parentRoutes: Routes = [
  {path: '', component: ParentHomeComponent}, 
  {
    path: '',
    loadChildren: () => ChildModule,
    canLoad: [ChildModuleGuard]
  },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(parentRoutes)
  ],
  declarations: [],
  exports: [
    RouterModule
  ]
})
export class ParentRoutingModule { }

In my main ParentModule component ; the ParentHomeComponent i want to inject the view of my ChildHomeCOmponent , like this :

<p>
  Parent-home works!
</p>
<app-Child-home></app-Child-home>

but this throws an error telling that the ChildHomeComponent isn't part of the ParentModule (as i'm not importing it directly) ;

How to deal with that ??

I want that if the module is loaded , my child home componen t gets displayed under the parent home component

Suggestions ??

Answer 1

This is not how lazy loading works in Angular.

Non-lazy loaded modules cannot access components from lazy loaded modules.

Answer 2

This is how you should lazy load you child module:

const parentRoutes: Routes = [
  {path: '', component: ParentHomeComponent}, 
  {
    path: '',
    loadChildren: 'path/ChildModule#ChildModule',
    canLoad: [ChildModuleGuard]
  },
];