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

Madhu Ranjan Madhu Ranjan · Accepted Answer · 2016-09-02T04:23:10

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

Routing between modules in Angular 2

3 Answers