Angular 2: circular function module dependency

I am currently working on one of the Angular2 applications. I have 3 function modules that contain other auxiliary function modules. I want to load the Feature 1 helper function module into the Feature 2 helper function module and vice versa. Below is a sample code.

action-routing.module.ts

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

actions subject-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'
          }
        ]
     }
];

Directory Theme-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 a circular dependency and throws an ERROR error in the maximum size of the call stack exceeded at compile time.

Is there any way to solve this error. I know that one way is to download the entire Feature module, but this is not a viable situation.

Thanks in advance.

+6
1

, , .

, . topic-routing.module.ts , topic. , .

routes . , /, . , , , .

"", / - , .

:

. app.routes, , , .

, "" , topic , action . , , , , , .

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)
+1

Source: https://habr.com/ru/post/1017156/


All Articles