Routing between modules in Angular 2

Question

I'm writing an application where all features got it's own module (A feature could be a page, or a part of a page). This because we want all features to have it's own domain logic, services, directives and components, i.e. in the dashboard module we got an ChartComponent widget that I don't want to expose to other views like login or profile.

The problem is when working with routing in Angular 2 you always routes to a particular component, not a module.

In our case, to set up a route for path: '/dashboard' component: DashboardComponent we need to declare DashboardComponent in app.module.ts, and that's fine, but since we're still in the module app.module our CharComponent is not exposed and will not render in our DashboardComponent since it's declared in dashboard.module.ts and not app.module.ts.

If we declare ChartComponent in app.module.ts it's working as it should but we lost the architecture for our application.

The file structure for the application is something like this:

└─ src/
   └─ app/
      ├─ app.module.ts
      ├─ app.component.ts
      ├─ app.routing.ts
      ├─ profile/
      |  ├─ profile.module.ts
      |  └─ profile.component.ts
      ├─ login/
      |  ├─ login.module.ts
      |  └─ login.component.ts
      └─ dashboard/
         ├─ dashboard.module.ts
         └─ dashboard.component.ts
            └─ chart/
               └─ chart.component.ts

Hylomorphism

Answer 1

It turns out that lazy loading didn't work properly in RC5, just upgraded to RC6 and it all worked.

Hylomorphism

Answer 2

It's not necessary to import components into main(app) module,

If you are loading routes lazily you may just define path like below,

// In app module route
{
 path: 'dashboard',
 loadChildren: 'app/dashboard.module#DashboardModule'
}

// in dashboard module
const dashboardRoutes: Routes = [
  { path: '',  component: DashboardComponent }
];

export const dashboardRouting = RouterModule.forChild(dashboardRoutes);

@NgModule({
  imports: [
   dashboardRouting
  ],
  declarations: [
    DashboardComponent
  ]
})
export class DashboardModule {
}

OR

You may just import the DashboardModule in the main module and it will work if the routes are not lazily loaded.

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    DashboardModule,
    routing
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

Gog

When running { path: 'dashboard', loadChildren: 'app/dashboard.module#DasboardModule' } I get this exception: EXCEPTION: Error: Uncaught (in promise): TypeError: lang_1.global.System.import is not a function – Hylomorphism

what version of RC you are using, if < RC 5, you wont be able to use Lazy loading. – Gog

Answer 3

Although that logic is nice, i would put all the rights in an accountmanagement component module for future tick on and off on features, while you don't want for your users to have all the rights you might want to upgrade a user account in the future. Expandability and foresee save's you time from future coding if your system is indeed keen on that logic.

Filiano