Angular2: What's the equivalent of the router 'loadChildren' without lazy loading

4

I'm trying 'plug' a sub ngModule (a feature module ) containing routing configurations (imported from RouterModule.forChild() ) into a parent ngModule.

When using lazy loading, specifying where to 'plug' the child module is done using the loadChildren key in the parent module route configuration.

ex:

export const parentModuleRouteConfig = [{
    path: 'myfeaturemodule',
    loadChildren: '/app/child.module'
}];

Actually, i don't whant to use lazy loading.

How can i tell the router to 'plug' (or use) the route config specified in a sub module at a given path ?

Clement

출처 angular angular2-routing

2 답변

12

You can still use loadChildren to load synchronously. There are some examples in this github issue.

import { ChildModule } from '/app/child.module';

export const parentModuleRouteConfig = [{
    path: 'myfeaturemodule',
    loadChildren: () => ChildModule
}];

1

You can define a preloading strategy, to tell Angular to preload all modules:

import { ...., PreloadAllModules } from '@angular/router'

@NgModule({
  ....
  imports: [
         RouterModule.forRoot(arrayOfYourRoutes, { preloadingStrategy: PreloadAllModules })
  ]

You can also define a custom strategy if you want to preload only some modules. For a good approach to do this, check this : example in angular doc

Edit after your comment, to self describe your module, here's what you can do:

@NgModule(
   imports: [RouterModule.forChild(routesOfFeatureModule)], //use forChild instead of forRoot
   exports: [RouterModule]
)
export class MyFeatureRoutingModule{} //define routing in a separate module of your feature, everything related to routing go there. This way, you doen't polute your main FeatureModule file. Re-export RouterModule to be able to use router directives in your FeatureModule just by importing MyFeatureRoutingModule


@NgModule(
   ...
   imports: [MyFeatureRoutingModule] //import routing of your feature module
)
export class MyFeatureModule{}



@NgModule(
   ...
   imports: [MyFeatureModule] // import your feature module
)
export class AppModule{}

  • Thanks, i didn't know about preloading strategy. But this features apparently allow us to refine the lazy loading strategy, the thing is that at this point, i don't want to use lazy loading at all. I just want my feature module to be 'self described' (including it's router config) and to be loaded at bootstrap by the parent module. - Clement
  • Ok then, why can't you use the standard way of loading feature modules, by importing it in your app module? @NgModule(...., imports: [MyFeatureModule]) export class AppModule{} - Melou
  • That's exactly what i'm doing. But my feature module contain it's own dedicated router config. The @NgModule will load all the exported components and directives from the feature module, but how can it load the feature module routing config without knowing where to 'plug' them within the router path hierachy ? That's the point of this question ! - Clement
  • This is what i've tried, and this does not work... But how can it work ??? How can the router know where to 'mount' all the routes defined in routesOfFeatureModule ? By 'where', i mean where in the router path hierarchy - Clement

Linked

Related

Latest