Angular 2 : Circular Feature module dependency

Question

I am currently working on one of application of Angular2. I have 3 feature modules in it which contains other sub feature modules. I want to load Sub feature module of Feature 1 into Sub Feature module of Feature 2 and vice a versa. below is sample code.

action-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: ActionComponent,
        children: [
          {
           path: ':id',
           loadChildren: 'app/action/action-detail/action-detail.module#ActionDetailModule'
          }
        ]
     }
];

action-detail-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: ActionDetailComponent,
    },    
    {
        path: 'topic-detail/:id',
        loadChildren: 'app/topic/decision-topic-detail/decision-topic-detail.module#DecisionTopicDetailModule',
    }
]

topic-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: TopicComponent,
        children: [
          {
           path: ':id',
           loadChildren: 'app/topic/decision-topic-detail/decision-topic-detail.module#DecisionTopicDetailModule'
          }
        ]
     }
];

decision-topic-detail-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: DecisionTopicDetailComponent,
    },    
    {
        path: 'action-detail/:id',
        loadChildren: 'app/action/action-detail/action-detail.module#ActionDetailModule'
    }
]

This creates cyclic dependency and throws error of ERROR in Maximum call stack size exceeded at compile time.

Is there any way to solve this error. I know of one way is to load whole Feature module it self but that is not viable situation.

Thanks in advance.

Answer 1

Routes should live in a place separate from the components and outside the modules those components are declared in.

For the longest time, I followed the pattern you're using too. topic-routing.module.ts seems like it should live with the topic components. But recently I've begun thinking about it in a different light, and your conundrum here highlights this perfectly.

I've begun thinking of routes as the heart of a given application. This paradigm shift happened when I began writing a second application and decided to re-use many of the components/modules I had written in the first one. I noticed that the only things that didn't make sense to reuse were the routes.

It was as if the routes defined the "app" and the modules/components are building blocks to be used by any given application.

In that light, I would recommend the following:

Move your route definitions out of each module into the top level app. They could live in a directory next to app.routes, and you could keep them distributed across their current files, or if you don't have that many of them, you could just merge them into the same file.

It may seem counter-intuitive, and you lose the "vertical" grouping where all topic stuff lives with the topics and all the action stuff lives with the actions. But when you look at routes as a fundamentally different animal than the components to which they refer, then it's less painful and it certainly solves your issue.

src
  |-app.component.ts
  |-app.component.html
  |-app.routes.ts  <-- includes the routes in the sibling directory
  |-routing
      |- action.routes.ts
      |- action-detail.routes.ts
      |- topic.routes.ts
      \- decision-topic-detail.ts
  |-decision-topic-detail (module)
  |-topic (module)
  \-action (module)