"Handling dependency injection with cyclic dependencies along with a custom implementation of HTTP and ConfigService

I am currently working on implementing a ConfigService to retrieve the appropriate configuration for each environment within the project. However, I have run into an issue with cyclic dependencies.

(index):28 Error: (SystemJS) Provider parse errors:
    Cannot instantiate cyclic dependency! Http: in NgModule AppModule
    Error: Provider parse errors:

Upon examining the code, it seems that the problem lies within the following components:

CustomHttp

constructor(backend: XHRBackend, options: RequestOptions, public spinnerService: SpinnerService, public exceptionService: ExceptionService, public configService: ConfigService)

ExceptionService

constructor(private _notificationService: NotificationService, private _spinnerService: SpinnerService, private _configService: ConfigService, private _router: Router)

ConfigService

constructor(private http: Http) {}

It is evident from this diagram (though not very well organized) that there are cyclic dependencies present:

https://i.sstatic.net/MkLp8.png

My main concern now is how to resolve this issue. I have heard about using Injector, but I am unsure if it is applicable in this particular scenario.

Thank you in advance for your assistance.

angulartypescript

Answer №1

Dependency injection (DI) is unable to resolve cyclic dependencies. One workaround is to inject the injector and obtain the instance imperatively:

@Injectable()
class ConfigService {
  private http: Http;
  constructor(injector:Injector) {
    setTimeout(() => this.http = injector.get(Http);
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the proper way to tap into the features provided by DefinitelyTyped in typescript?

While working on my Angular2 app that deals with money amounts, I decided to use dinero.js to handle money values. However, I am encountering difficulties in accessing certain features in Typescript. Following the instructions, I installed the DefinitelyT ...

angulartypescriptdefinitelytyped

Stringified HTML code showcased

When working with Angular, I have encountered an issue where I am calling a function inside an .html file that returns a string containing a table element. My goal is to convert this string into HTML code. I attempted to use [innerHtml]: <p [innerHtml ...

htmlangulartypescript

Using NestJS to populate data will only populate the first element

I have a Mongoose schema in NestJS structured like this: ... @Prop() casinoAmount: number; @Prop() gameHyperLink: string; @Prop() casinoHyperLink: string; @Prop({ type: Types.ObjectId, ref: 'Game' }) games: Game[]; } I'm t ...

node.jstypescriptexpressmongoosenestjs

The specified "ID" type variable "$userId" is being utilized in a positional context that is anticipating a "non-null ID" type

When attempting to execute a GraphQL request using the npm package graphql-request, I am exploring the use of template literals. async getCandidate(userId: number) { const query = gql` query($userId: ID){ candidate( ...

typescriptgraphqltemplate-strings

What kind of null/undefined is being assumed?

system details: Visual Studio Code Version: 1.47.3 Typescript Version: 4.0.0-dev.20200727 tsconfig.js: "strict": true, code example: let x = null; // x is any type let y = x; // x is null type(why? x is any type on top), y is null type x = 1; / ...

typescripttypescript-typings

How can I ensure that TypeScript recognizes when I add a missing property back to an object in this scenario?

I recently came across an issue while using Typescript: Omit nested property and ended up encountering more complex errors. So my question remains - how can I replace multiple nested props on a TypeScript input in the convert function? P.S. On a side not ...

typescript

Quickly send off an Angular 4 HTTP POST request and move on

I've been experimenting with making a fire and forget request, but none of my attempts seem to be working as expected. The situation is that after completing one subscribable request, I need to redirect to another page. However, before the redirectio ...

angularhttp-post

Setting up Datatables for Pagination Features

Looking for advice on setting up datatables with paginated results. For example: Here is an example of paginated results from my backend API: { "total": 50, "per_page": 15, "current_page": 1, "last_page": 4, "next_page_url": "http://domain.app ...

angulardatatablesangular6angular-datatablesng2-smart-table

Exploring the capabilities of using Next.js with grpc-node

I am currently utilizing gRPC in my project, but I am encountering an issue when trying to initialize the service within a Next.js application. Objective: I aim to create the client service once in the application and utilize it in getServerSideProps (wit ...

javascripttypescriptnext.jsgrpcgrpc-node

Create a system for detecting changes in simple input elements and triggering a function to update the final result

There are a maximum of 12 inputs that represent the same entities or objects but with varying integer values. These values directly impact the final result displayed to the user. Whenever any of the input values change, a function needs to be triggered to ...

angulartypescript

I encounter an error in my JavaScript function indicating that it is not defined

let element = document.querySelector("#value"); let buttons = document.querySelectorAll(".btn"); buttons.forEach(function (button) { button.addEventListener("click", function(event){ console.log(event.currentTarge ...

javascripttypescript

In Vue, you can dynamically load a JavaScript file containing a JavaScript object during runtime

I'm in the process of developing a no-code application with Vue. I have come across an issue where I cannot add functions to a JSON file that I want to import at runtime. As a workaround, I decided to use a JavaScript or TypeScript file to store the J ...

javascripttypescriptvue.js

What is the mechanism behind angular2's spa routing functioning seamlessly without the need for the hash character in the url?

During my experience with the Angular2 "Tour of Heroes" tutorial, I made an interesting observation about how their single page application router functions without a trailing hash symbol (#) in the URL. This differs from the Kendo SPA router, which typica ...

javascriptangularangular-ui-routersingle-page-applicationrouter

Passing dynamically loaded parameters to a function during dropdown value selection in Angular 2

Could you please review if I am passing the parameters correctly in the li tag's click function of the updateId method? The console errors only point to that line. This is my app.component.html code: <div class='form-group' style="width ...

javascripthtmltwitter-bootstrapangular

What are the steps for customizing the interface in TypeScript?

After fixing a type error related to adding custom functions to the gun chain by including bind():any within IGunChainReference in @types/gun/index.ts, I am wondering how to transfer this modification to one of my project files. I have not been able to fi ...

typescriptgun

The "number" input type is functioning correctly on Chrome, but on Firefox, it is accepting characters other than numbers

While developing in Angular, I encountered a challenge where I needed to create an input that only accepts numeric characters. Initially, I tried using type="number" which worked perfectly in Google Chrome but surprisingly allowed non-numeric characters ...

angulargoogle-chromefirefoxinputnumbers

Best practices for customizing Material UI v5 Switch using Theme

I've successfully implemented a Material Switch based on my design by creating a custom component and styling it using the styled and sx prop. However, I'm interested in figuring out how to achieve the same result within the theme itself so that ...

reactjstypescriptmaterial-ui

What is the best way to showcase a collection of inherited objects in Angular?

How can I efficiently display a list of various objects that inherit from the same abstract class in an Angular application? What is considered optimal practice for accomplishing this task? Consider the following basic model: abstract class Vehicle { ...

angulartypescriptoop

Vue3 with Typescript may either display an error message or remain empty when handling props

I've been attempting to utilize the default Quasar card component in order to display data received from props. Unfortunately, I haven't had any success as my component remains empty and I keep encountering various errors with each attempt. Rece ...

typescriptvuejs3vue-componentquasar-frameworkquasar

Creating a Checkbox-enabled Muiv5 TreeView for an array of objects: Step-by-step guide

Currently, I am utilizing the muiv5 treeview component to construct a treeview dropdown. Unfortunately, the component does not have built-in checkbox support for selection/deselection. However, after conducting some research, I managed to find a somewhat s ...

reactjstypescriptmaterial-uitreeview