2

Let's say we have the following: A CoolModule (cool.module.ts) which takes care of cool stuff. The CoolModule contains the following:

  • CoolDialogComponent (cool-dialog.component.ts)
  • CoolService (cool.service.ts)
  • ...other cool files

An application that uses CoolModule is using it's functions through the CoolService, which is an injectable singleton service.

CoolService has a bunch of cool methods. One of them can open a material-dialog. It passes the CoolDialogComponent for the dialog to use it as the dialog's content.

The CoolDialogComponent has a particular action that calls one of the CoolService's methods.

At this point:

  • CoolDialogComponent has a dependency on CoolService
  • CoolService has a dependency on CoolDialogComponent

Am I the only one here who thinks that this shouldn't be refactored just because of the circular dependency warning?

  • I think the CoolService does it's job to be an injectable service that we can use it's features through.
  • The CoolDialogComponent does it's job by defining the modal dialog's content. And it's able to call on of it's methods.
  • Both of them are bounded together in the CoolModule, they don't exist without each other.
  • Creating an additional service just to solve the circular dependency warning seems a bit like raping it's structure.

Please explain me the point that I don't see here! And/or provide a solution to get rid of the warning! (No I don't want to turn it off in angular-cli's config).

Burnee
  • 2,453
  • 1
  • 24
  • 28
  • At some point you will face circular dependency that prevents application from running. – Antoniossss Jul 10 '18 at 20:25
  • 2
    `CoolService` has a dependency on `CoolDialogComponent`? Not cool! Services shouldn't really know about components that use them. – R. Richards Jul 10 '18 at 20:25
  • If `CoolService` creates `Dialog` then there is no dependency here. You are basicly saying that you cannot use `CoolService` without `CoolDialog` - rly bad design. – Antoniossss Jul 10 '18 at 20:26
  • CoolService (CS) has a couple of features which -at a point- open a popup for the user. A popup can contain multiple actions. All of these actions are accessible through the CS (they're defined in it, and they really belong to it). The CS uses the injected MatDialog (from angular-material) to open a popup with a given content which content is defined by a component. Like this: `this.matDialog.open(CoolDialogComponent, { disableClose: true });`. My service has to know it's components to pass them to MatDialog. The components has to know the CS to continue with the feature with the chosen action – Burnee Jul 11 '18 at 00:45
  • OR I have to implement EventEmitters for the components and bind them when passing the component (I'm not sure if it's working). OR I have to pass EventEmitters through MatDialog's data-passing (which makes a much more complicated dependency on MatDialog). OR I have to implement another -kind of- top-level service. All of these solutions look either bad practice and overheady to me. – Burnee Jul 11 '18 at 00:47
  • Possible duplicate of [Angular DI Error - EXCEPTION: Can't resolve all parameters](https://stackoverflow.com/questions/37997824/angular-di-error-exception-cant-resolve-all-parameters) – Reactgular Jul 11 '18 at 01:49

1 Answers1

2

The CoolDialogComponent has a particular action that calls one of the CoolService's methods.

Define a CoolServiceInterface in another TypeScript file.

export interface CoolServiceInterface {
    sharedMethod();
}

Have the service implement the interface, and have the component only reference the interface.

CoolService has a bunch of cool methods. One of them can open a material-dialog. It passes the CoolDialogComponent for the dialog to use it as the dialog's content.

CoolService should inject a new CoolDialogContext class into CoolDialogComponent when the modal dialog is created. When you create the modal dialog using the component factory there is a way to add providers before it's created, but the point here is that the CoolService should be use to create the modal, and the context is used to manage the life-cycle of the modal.

Reactgular
  • 52,335
  • 19
  • 158
  • 208
  • Hi, can you explain more with some example like component, service and interface file with imports and exports. may be https://codesandbox.io/ example. I have the same issue, but couln't undertand how to resolve – yatinsingla May 14 '21 at 14:30