Tips for solving a deliberate circular dependency in an angular provider

If the existing injection token for this provider is available, I want to use it. Otherwise, I will use the specified provider.

Below is the code snippet:

    providers: [
        {
            provide: DesignerRecoveryComponentStore,
            useFactory: (injector: Injector) => {
                return injector.get(
                    DesignerRecoveryComponentStore,
                    new DesignerRecoveryComponentStore(
                        injector.get(Store),
                        injector.get(Actions),
                        injector.get(NgZone),
                        injector.get(DesignerActionDispatcher),
                        injector.get(PresentationRecoveryService),
                        injector.get(Router),
                        injector.get(PadsDialogService)
                    )
                );
            },
            deps: [Injector]
        }
    ]

This code snippet checks the availability of a provider for DesignerRecoveryComponentStore (a subclass). If it exists, it is returned. If not, a new instance of the main class is created.

The log shows circular dependency errors.

What is the correct way to address this issue?

I attempted to use an interface instead of the class I am searching for, but it resulted in compilation errors.

Answer №1

Alright, I've managed to figure it out.

The problem arose from my attempt to reuse a container within another container. The resolution came in the form of creating a new container that incorporated the required class.

[ container A injecting A]    [ container B injecting B]
                \                /
                 \              /
            [ component A requiring A or B ]

Instead of

       [ container A injecting B ]
                    |
[ container B searching for B or injecting A]

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

the undefined 'pipe' cannot be read

Trying to perform unit testing for an Angular component is a new experience for me. Currently, I am encountering a specific issue that I would like assistance with. The component in question contains the following select statement: this.store.select(getI ...

Changing application security is threatened by sanitizing base64 images

I'm having some trouble displaying an image that I've converted to base64 encoding. data:image/vnd.microsoft.icon;base64,AAABAAIAICAAA..... No matter what I try, I always end up with the following error: { changingThisBreaksApplicationSecur ...

Location of the bundled Webpack index.html file while running locally on a Nativescript WebView

I am currently working on a hybrid app project that involves both NativeScript and Angular. To integrate the two, I have set up a WebView and consolidated all my Angular project files into a folder within my NativeScript project. As part of this setup, I ...

Angular6 : PrimeNg datatable: the nova-light theme failing to activate

I'm currently working on an Angular 6 app that is equipped with the latest version of PrimeNG (6.1.4) and I am using a simple datatable component. My goal is to apply the nova-light theme to my datatable, but unfortunately, it is not being applied cor ...

Is there a way to automatically extend my content to fill the space on the page below the Material UI AppBar?

I am currently using React and Material UI React to develop my application. My goal is to implement the AppBar component with content underneath, without causing the entire page to scroll. I want the content to occupy the maximum remaining height and the f ...

Discovering the proper method for indicating the type of a variable in the middle of a statement

In my code, there was a line that looked like this: let initialPayload = this.db.list("/members").snapshotChanges() as Observable<any[]> But then I changed it to this: let initialPayload = this.db.list("/members").snapshotChanges ...

Android webview encounters issues with loading javascript and css files

I am facing an issue with my Angular web app that I want to run locally inside a WebView of my android app. However, upon opening the app, all I see is a blank screen. Upon inspecting the chrome tool, I noticed a net::ERR_FILE_NOT_FOUND error for the .js ...

Sending detailed exception information from asp.net core to the client (such as Angular)

Trying to retrieve exception text from the backend (ASP.NET Core) in an Angular application has been a challenge. Examples have shown the controller action's return type as either JsonResult or ActionResult. In such cases, we can utilize the followi ...

Issue with Angular Material: Default selection not being applied in mat-select component

When I have a mat-select with options defined as objects in an array, I am facing an issue where the default selected value is not being set when the page renders. In my TypeScript file, I have: public options2 = [ {"id": 1, "name": "a"}, {"id": 2 ...

The Route.ts file does not export any HTTP methods

Encountering an error while trying to migrate code from Next JS 12 with pages router in Javascript to Next JS 13 with TypeScript. ⨯ Detected default export in 'vibe\src\app\api\auth[...nextauth]\route.ts'. Export a name ...

The NGX-Datatable is showing certain numerical values as 'Infinity'

I'm currently investigating why I keep seeing the word 'Infinity' displayed for certain values in my table. For instance, one of the columns is labeled 'Bill To' and has a value of '20E7543' as a string. Despite confirmi ...

Attempting to retrieve data from cloud Firestore utilizing keyvalue in Angular

My database stores user information under the 'users' collection. I can access this data using the following code: In my service: users$ = this.afs.collection<Users[]>('users').valueChanges(); In my component: public users = t ...

Using NGRX with Angular's AuthGuard

Having trouble using AuthGuard with NGRX - I keep getting undefined on a specific route: Even though Store shows that estaAutenticado is true, I'm not able to access it in time - could this be due to async behavior? Here's my guard implementati ...

Modifying text input in Angular

I am working on an Angular form that includes a text input which I would like to be able to edit by clicking on the edit button. Within the form, there are 3 buttons available: edit, cancel (which discards changes), and save (which saves changes). When t ...

A TypeScript generic function designed to accept either two arrays or two objects, but not a combination of both

Currently, I am creating an extend function in TypeScript that has the capability to: Update the first object with the keys/values of the second when given two objects. Append the elements of the second array to the first array when provided with two arr ...

Absent 'dist' folder in Aurelia VS2015 TypeScript project structure

After downloading the Aurelia VS2015 skeleton for typescript, I encountered an issue trying to run the Aurelia Navigation app in IIS Express. One modification that was made to the skeleton was adding "webroot": "wwwroot" to the top level of project.json. ...

Utilize Angular Ag-grid's feature called "Columns Tool Panel" to trigger checkbox events

How can I capture the check/uncheck/change event of side panel columns? I have reviewed the documentation at https://www.ag-grid.com/angular-data-grid/tool-panel-columns/, but couldn't find any information on this. This relates to the Enterprise ver ...

The collaboration between an object literal declaration and an object instantiated through a constructor function

If I declare let bar: Bar; and set it to initialFooConfig;, is bar still considered as type Bar and an object, or does it become an object in literal notation? If the assignment can be done both ways (assuming initialFooConfig is not a constant), what set ...

Defining data types for an array of objects in a useState hook

I'm having trouble understanding the issue with my code. interface dataHistory { data: string, before: string | number, after: string | number, } I have an interface defined outside of the Functional Component and inside I specify its struct ...

Angular fails to combine values within routerLink

The issue is straightforward - I have a component that retrieves the last searched items saved in sessionStorage as an array of ListItem objects: export class SearchlistComponent { results = JSON.parse(<string>sessionStorage.getItem("lastSear ...