6

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.

Parikh Vaibhav
  • 199
  • 2
  • 12

1 Answers1

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)
Daniel Patrick
  • 3,980
  • 6
  • 29
  • 49
  • If I write all my routes at top level, won't I loose feature of lazy loading feature of Angular2? – Parikh Vaibhav May 15 '17 at 05:57
  • I tried your solution, but it did not help as the actual problem here is action-detail module is imported into topic module and vice a versa. See below git https://github.com/vaibhavbparikh/circular-routes/tree/seperate-routes – Parikh Vaibhav May 23 '17 at 08:16
  • 1
    @ParikhVaibhav, I was under the assumption that the only reason you were importing the action-detail module into the topic module was because you were trying to share routes across the modules. If it is not for routes, what is the reason you have that circular dependency? Modules cannot have circular dependencies; if there is a reason you are including A in B, then there should be nothing in B that A needs, otherwise this is a design flaw. – Daniel Patrick May 23 '17 at 15:38
  • 1
    I want to have sub modules to be imported into other module without loading main module. Please have a look at this repo.https://github.com/vaibhavbparikh/circular-routes. Also there is some bug in Angular cli which has been reported, please see link in comment in question. If this might be design flaw can you help me what is best practice. – Parikh Vaibhav May 23 '17 at 15:53