Unable to inject class with DI

Question

I have a class that uses an instance of DialogService from 'aurelia-dialog` to open almost every dialog in my Aurelia application. In a very abstract way the class looks like this:

export class DialogTrigger{
    triggerDialogA() {...}
    triggerDialogB() {...}
    triggerDialogC() {...}
}

Everything works fine until I try to inject DialogTrigger to one of the dialogs.

So let's say that I want to create a new dialog, DialogD. I simply add another method triggerDialogD() in DialogTrigger that opens a new dialog with a DialodD view model and everything works. But if I want my new dialog to also trigger one of the other dialogs (A,B or C) by using an instance of DialogTrigger everything falls apart.

If I inject DialogTrigger into DialogD I always get an error:

key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?

If I remove the dependency, the dialog works.

TL;DR I have a DialogTrigger class that opens aurelia-dialog s. DI fails when I inject DialogTrigger to any dialog instantiated by it.

Any ideas?

Answer 1

Sounds like a circular dependency issue.

You would have to use path strings to reference the dialogs inside DialogTrigger . You cannot import the Dialog into DialogTrigger and then also import DialogTrigger into the Dialog .

---

This would work:

import { DialogService } from 'aurelia-dialog';

export class DialogTrigger {
  static inject = [DialogService];

  constructor(dialogService) {
    this._dialogService = dialogService;
  }

  openDialogA() { this._dialogService.open({ viewModel: './prompt' }); }
  openDialogB() { this._dialogService.open({ viewModel: './prompt' }); }
}

---

This WILL NOT work:

import { DialogService } from 'aurelia-dialog';
import { Prompt } from './prompt';

export class DialogTrigger {
  static inject = [DialogService];

  constructor(dialogService) {
    this._dialogService = dialogService;
  }

  openDialogA() { this._dialogService.open({ viewModel: Prompt }); }
  openDialogB() { this._dialogService.open({ viewModel: Prompt }); }
}

---

Another option is to pass the reference to DialogTrigger in the open() function's model: {} parameter. Like so:

this._dialogService.open({ viewModel: './prompt', model: { dialogTrigger: this }  });