Angular How import children in html with lazy loading

Question

I try to implement lazy loading with clidren ans grandchildren. and even more challenger the components have the same name so I use aliases.

So inside one of my children, I import a grandchild in the html <app-Detail-index> part but I have errors.

Stack Angular 13

so a add shemas on NgModule and move loading of detail compents

'grandchild ' is not a known element:
1. If 'grandchild' is an Angular component, then verify that it is part of this module.
2. If 'grandchild' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc

const routes: Routes = [
  { path: '', redirectTo: 'index', pathMatch: 'prefix'},
  { path: 'index', component: IndexComponent },
  { path: ':domId/view', component: ViewComponent },
  { path: 'create', component: CreateComponent },
  { path: ':domId/edit', component: EditComponent } ,
  { path: 'domDetail', loadChildren: () => import('../domDetail/domDetail.module').then(m => m.DomDetailModule) },
];
   

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

@NgModule({
  declarations: [
    CreateComponent,
    EditComponent,
    IndexComponent,
    ViewComponent,
  ],
  imports: [
    CommonModule,
    DomRoutingModule,
    FormsModule,
    ReactiveFormsModule,
  ]
})
export class DomModule { }

const routes: Routes = [
  { path: '', redirectTo: 'index', pathMatch: 'prefix'},
  { path: 'index', component: IndexComponent },
  { path: 'create', component: CreateComponent },
];
   

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
})
export class DomDetailRoutingModule { }
@NgModule({
  declarations: [
    CreateComponent,
    IndexComponent,
  ],
  imports: [
    CommonModule,
    DomDetailRoutingModule,
    FormsModule,
    ReactiveFormsModule,
  ]
})
export class DomDetailModule { }

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule)},
  { path: '',   redirectTo: 'home', pathMatch: 'full' },
  { path: 'dom', loadChildren: () => import('./dom/dom.module').then(m => m.DomModule) },
  { path: '**', component: PageNotFoundComponent },
...
 

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: [  
    
  ],  
  providers: [  
  ], 
})
export class AppRoutingModule { }

When you want to use a component inside another module, you might have to add them to the declarations of the module that you're loading. If you intend to load them dynamically, then you might have to load the module in a way that your children's module understands there a new module is being added. — Anglesvar
– Anglesvar, Commented Jul 25, 2022 at 15:17
Also, I think you might need to understand the difference between RoutingModule and a componentModule. Technically speaking, you don't even need a RoutingModule and instead, you can use routes defined in a constant and have it exported from a file, import it in your componentModule, and add it in the imports like this RouterModule.forChild(exampleRoutes). — Anglesvar
– Anglesvar, Commented Jul 25, 2022 at 15:23
i want to use a component inside a anther component , i try to use dynamiccaly the loading component but have error on my import in my ts file — kiki keke
– kiki keke, Commented Jul 25, 2022 at 15:47

Anglesvar · Accepted Answer · 2022-07-25 16:10:58Z

1

This stackblitz could help you understand how to lazy load modules, use them dynamically and also load components eagerly. A component that is inside a module cannot find a component that is outside a module. To help the module find something, you might have to import them into your module (lazy/eager). I've added an example for all the cases. In your code, you must add the component to declarations as well as exports in your module. And when you just want to use components with the selector, you might have to add the appropriate component/module to the module that is rendering it.

Stackblitz loading modules and components

answered Jul 25, 2022 at 16:10

Anglesvar

1,1549 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kiki keke Over a year ago

my grand child in same level as child because plan to use it in another component

Anglesvar Over a year ago

In that case, just add the grandchild to the child module's exports and declaration. By importing the child module, you'll have access to the grandchild component.

kiki keke Over a year ago

think it's work

Collectives™ on Stack Overflow

Angular How import children in html with lazy loading

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related