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

Question

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 ?

Answer 1

With AOT

Export your child routes instead of adding them to your child module.

export const ChildRoutes: Routes = [
    { path: '', component: ChildComponent }
];

Import the child module into the parent module and include routes directly.

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

@NgModule({
    imports: [
        ChildModule
    ]
})
export class ParentModule { }

Without AOT

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
}];

Answer 2

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{}