Injecting singletons in a circular manner with Inversify

Question

Injecting singletons in a circular manner with Inversify

Is it possible to use two singletons and enable them to call each other in the following manner?

import 'reflect-metadata';
import { Container, inject, injectable } from 'inversify';

let container = new Container();

@injectable()
class Dom {
  private domUi: DomUi;

  constructor (domUi: DomUi) {
    this.domUi = domUi;
  }
}

@injectable()
class DomUi {
  private dom: Dom;

  constructor (dom: Dom) {
    this.dom = dom;
  }
}

@injectable()
class Test {
  constructor (dom: Dom) {
    console.log(dom);
  }
}

container.bind<Dom>(Dom).toSelf().inSingletonScope();
container.bind<DomUi>(DomUi).toSelf().inSingletonScope();

const test = container.resolve(Test);

Encountering this error message:

Error: Missing required @inject or @multiInject annotation in: argument 0 in class Dom.

How can this issue be resolved? Even after trying out @inject and @multiInject, the problem persists.
Could there be a more suitable approach to tackle this conundrum from a design pattern perspective?

typescript dependency-injection singleton inversifyjs

Answer 1

Answer №1

It appears that a bug has been identified, and to address it, the following workaround can be used:

import "reflect-metadata";
import { Container, inject, injectable } from "inversify";
import getDecorators from "inversify-inject-decorators";

let container = new Container();
let { lazyInject } = getDecorators(container);

@injectable()
class DomUi {
    private _dom: Dom;

    public constructor (dom: Dom) {
        this._dom = dom;
    }
}

@injectable()
class Dom {
    @lazyInject(DomUi) private domUi: DomUi;
}

@injectable()
    class Test {
    constructor(dom: Dom) {
        console.log(dom);
    }
}

container.bind<Dom>(Dom).toSelf().inSingletonScope();
container.bind<DomUi>(DomUi).toSelf().inSingletonScope();
const dom = container.resolve(Test);

A better implementation is suggested using symbols instead of classes for identification purposes:

import "reflect-metadata";
import { Container, inject, injectable } from "inversify";
import getDecorators from "inversify-inject-decorators";

let container = new Container();
let { lazyInject } = getDecorators(container);

const TYPE = {
    Dom: Symbol("Dom"),
    DomUi: Symbol("DomUi"),
    Test: Symbol("Test")
};

interface Dom {}
interface DomUi {}
interface Test {}

@injectable()
class DomUi {
    public dom: Dom;

    public constructor (
        @inject(TYPE.Dom) d: Dom
    ) {
        this.dom = d;
    }
}

@injectable()
class Dom {
    @lazyInject(TYPE.DomUi) public domUi: DomUi;
}

@injectable()
class Test {
    constructor(
        @inject(TYPE.Dom) d: Dom
    ) {
        console.log(d, d.domUi.dom);
    }
}

container.bind<Dom>(TYPE.Dom).to(Dom).inSingletonScope();
container.bind<DomUi>(TYPE.DomUi).to(DomUi).inSingletonScope();
container.bind<Test>(TYPE.Test).to(Test);
const dom = container.get(TYPE.Test);

Answer 2

It appears that a bug has been identified, and to address it, the following workaround can be used:

import "reflect-metadata";
import { Container, inject, injectable } from "inversify";
import getDecorators from "inversify-inject-decorators";

let container = new Container();
let { lazyInject } = getDecorators(container);

@injectable()
class DomUi {
    private _dom: Dom;

    public constructor (dom: Dom) {
        this._dom = dom;
    }
}

@injectable()
class Dom {
    @lazyInject(DomUi) private domUi: DomUi;
}

@injectable()
    class Test {
    constructor(dom: Dom) {
        console.log(dom);
    }
}

container.bind<Dom>(Dom).toSelf().inSingletonScope();
container.bind<DomUi>(DomUi).toSelf().inSingletonScope();
const dom = container.resolve(Test);

A better implementation is suggested using symbols instead of classes for identification purposes:

import "reflect-metadata";
import { Container, inject, injectable } from "inversify";
import getDecorators from "inversify-inject-decorators";

let container = new Container();
let { lazyInject } = getDecorators(container);

const TYPE = {
    Dom: Symbol("Dom"),
    DomUi: Symbol("DomUi"),
    Test: Symbol("Test")
};

interface Dom {}
interface DomUi {}
interface Test {}

@injectable()
class DomUi {
    public dom: Dom;

    public constructor (
        @inject(TYPE.Dom) d: Dom
    ) {
        this.dom = d;
    }
}

@injectable()
class Dom {
    @lazyInject(TYPE.DomUi) public domUi: DomUi;
}

@injectable()
class Test {
    constructor(
        @inject(TYPE.Dom) d: Dom
    ) {
        console.log(d, d.domUi.dom);
    }
}

container.bind<Dom>(TYPE.Dom).to(Dom).inSingletonScope();
container.bind<DomUi>(TYPE.DomUi).to(DomUi).inSingletonScope();
container.bind<Test>(TYPE.Test).to(Test);
const dom = container.get(TYPE.Test);

Injecting singletons in a circular manner with Inversify

Answer №1

Similar questions

Utilizing TS2722 alongside restrictive parameters in tsconfig

Testing Angular: How to Unit-test HttpErrorResponse with custom headers using HttpClientTestingModule

Displaying error messages in Angular Material upon clicking a button

The Typescript compiler is throwing an error in a JavaScript file, stating that "type aliases can only be used in a .ts file."

An exception is thrown by TypeScript's readline.createInterface function

Is it feasible to set an empty object as the initial default value in the state of a React component?

"Encountering a Bug in Angular 2 Related to Chart.js

What is the best way to incorporate a @types module into a TypeScript file that is not already a module?

The side menu fails to appear when pressed

TypeScript Compile Error: The property is not available in the 'IStateParamsService' type

Utilize Dinero.js to implement currency formatting for input fields in React applications

How can I configure React Router V6 to include multiple :id parameters in a Route path, with some being optional?

Exploring the incorporation of interfaces into Vue.js/Typescript for variables. Tips?

Launching a Material UI Modal nested within a parent component

Is it Possible to Use Guice Constructor Injection without Annotations?

Using command line arguments in a Tauri project with a Next.js frontend

Setting default values on DTO in NestJS can be done by using the DefaultValue decorator provided

Ensure that the variable is not 'undefined' and that it is a single, clean value

Performing a conditional query on a Many-to-Many relationship in TypeORM

Enhancing JavaScript with TypeScript: implementing functional mixins