Routing between modules in Angular 2 -


i'm writing application features got it's own module (a feature page, or part of page). because want features have it's own domain logic, services, directives , components, i.e. in dashboard module got chartcomponent widget don't want expose other views login or profile.

the problem when working routing in angular 2 routes particular component, not module.

in our case, set route path: '/dashboard' component: dashboardcomponent need declare dashboardcomponent in app.module.ts, , that's fine, since we're still in module app.module our charcomponent not exposed , not render in our dashboardcomponent since it's declared in dashboard.module.ts , not app.module.ts.

if declare chartcomponent in app.module.ts it's working should lost architecture our application.

the file structure application 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 

it's not necessary import components main(app) module,

if loading routes lazily may define path 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 import dashboardmodule in main module , work if routes not lazily loaded.

@ngmodule({   imports: [     browsermodule,     formsmodule,     dashboardmodule,     routing   ],   declarations: [     appcomponent   ],   providers: [     approutingproviders   ],   bootstrap: [ appcomponent ] }) export class appmodule { } 

hope helps!!


Comments