angular2 routing - Angular Component not eager loaded

Question

I want to eager load a component MyComponent.

AppModule imports SharedModule and AppRoutingModule, SharedModule declares MyComponent, AppComponent is bootstrapped.

app-routing.module.ts

const routes: Routes = [
    { path: home/comp, component: MyComponent }
    { path: home, loadChildren: () => import('./mymodule/mymodule.module')
                                .then(x => x.MyModule)},
]
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
]

MyComponent is also a childroute in MyModule:

@NgModule({
    imports: [
      SharedModule, 
      RouterModule.forChild([   
        {
          path: 'home/comp',
           component: MyComponent
        }
    ]
}

But MyComponent is not eager loaded. As I am also mixing with lazy loading certain modules, is it possible I am overwriting things? Official documentation is not too clear to me.

I have tried

adding:

data:{preload:true} 

to the paths declared in routermodule

used:

loadChildren: () => import('./mycomponent/mycomponent.cmpnt').then(x => x.MyComponent)

both in AppModule as in MyComponent it was not successful. What am I doing wrong? Thanks

question from:https://stackoverflow.com/questions/65649477/angular-component-not-eager-loaded

Answer 1

Waitting for answers