Portekoi
Portekoi

Reputation: 1147

Angular 4 Modules call each others

Let's say I have 2 modules : Customers / Orders like this :

/customers
    /customers-list.component.html
    /customers-list.component.ts
    /customers-details.component.html
    /customers-details.component.ts
    /customers-create.component.html
    /customers-create.component.ts
    /customers.service.ts
    /customers.module.ts

/orders
    /orders-list.component.html
    /orders-list.component.ts
    /orders-create.component.html
    /orders-create.component.ts
    /orders.service.ts
    /orders.module.ts

Both are using their own services (by using providers in module)

orders.module import the customers.module because in my orders-create.component.ts, I have a form where I can add a new order for a client. If the client do not exist, I can press a button and the customers-create.component is display.

But now, I need to add the list of the Orders for a given customer in my customers-details.component by calling the orders-list.component.

But I can't import the Orders module in my Customers Module because of circular dependency.

So : what is the best approach in this kind of situation? Do I need to create a shared module for my orders-list.component?

Upvotes: 0

Views: 91

Answers (2)

ps2goat
ps2goat

Reputation: 8485

You could make a third module that composes the views you are looking for. That allows you to continue to have domain-specific components (order and customer), but create different, but still reusable, pages.

E.g.:

/pages
  /customer-view.component
  /orders-create.component.ts

Your customer-view.component would use the customers-details.component and the orders-list.component to create the full view you describe.

Your orders-create.component.ts should live in this new module, as well, since it uses the customer component.

* disclaimer: name the module what you wish, it is merely an example.

Upvotes: 0

un.spike
un.spike

Reputation: 5113

Both are using their own services (by using providers in module)

I suppose it's a wrong approach, you should have isolated (from logic) service to handle request (like API service) which would be defined once and could be reused anywhere.

Upvotes: 1

Related Questions