Angular 2: How to make a separate module load on a separate route, and not the entire AppModule?

Question

JavaScript

It is necessary to divide the entire application into modules, while each feature / component part (for example, Sidebar) must have its own module. How can I make sure that only the necessary modules are loaded on a separate route?
For example, on the /users page, you need to load the SidebarModule and UserlistModule.

Answer 1

We import a new module
in app.module In the app routing, you need to specify the parent routing for UsersModule

{
        path: 'users',
        loadChildren: './users/users.module#UsersModule',
    }

Create a new module users.module

imports: [  UserRoutingModule ]
declarations: [ UserComponent ]

In user.component. html and all static elements (SidebarModule and UserlistModule)
In user-routing we write all the routing we need for this module -

@NgModule({
  imports: [
   RouterModule.forChild([

      {
        path: '',
        component: UserComponent,
        canActivate:[AuthGuardService],
        children: [
          {
            path: '',
            children: [
              {
                path: 'users',
                component: ElseComponent,
                canActivate:[AuthGuardService]
              },
              {
                path: '',
                  redirectTo: 'users',
                  canActivate:[AuthGuardService]
              }
            ]
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ]
})

Answer 2

If I understand correctly, we specify moduleId in the decorator

@Component({
      moduleId: module.id,
      selector: 'sidebar-module'
      ...
    });

In routes we write

export const routes: Routes = [
...
  { path: 'users/:id', component: SidebarModule }
 ...
];

https://angular.io/docs/ts/latest/cookbook/compone...