Sign up for notifications using NGRX

How can I incorporate CompanyEffects in my AppModule after receiving a response from the AppConfigService on the server?

Effect registration within AppModule

EffectsModule.forRoot([CompanyEffects]),

CompanyEffects Implementation

export class CompanyEffects {
    constructor(
        private actions$: Actions,
        private companyService: CompanyService,
        private env: AppConfigService,
    ) {
    }
}

@Effect()
loadTeams$: Observable<any> = this.actions$.pipe(
    ofType(companyActions.CompanyActionsTypes.ALL_TEAMS_REQUEST),
    mergeMap(() =>
        this.companyService.teamList().pipe(
         ...
        )
    ));

AppConfigService Setup

export class AppConfigService {
    public appConfig: AppConfig;

    constructor(private injector: Injector) { }

    loadAppConfig(): Promise<any> {
        const http = this.injector.get(HttpClient);
        let configUrl = "/api/data/config";

        const promise = http
            .get(configUrl)
            .toPromise()
            .then((data: AppConfig) => {
                this.appConfig = data;
                return data;
            });
        return promise;
    }      
}

Answer №1

It cannot be done.

The only option is to modify the CompanyEffects to bypass or postpone the actions until this.env.appConfig is available.

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

Transmitting intricate Objects to Angular Directive

I am facing an issue where I need to pass a complex object to my directive. The object is a different formControl so I cannot use [formControl], formControlName, etc. <input matInput appDateInputEvents [control]=”fieldGroup.get(‘date’)”> Thi ...

I'm seeking clarity on the proper replacement for ngModel within this Angular code, as I've been cautioned about using form control name and ngModel simultaneously

I have been using ngModel and formControlName together, which is causing a warning to appear in the console. I am trying to resolve this issue by removing ngModel, but I'm unsure of what to replace it with. I've attempted a few solutions, but non ...

Mastering the Conversion from NGRX Effect to NGRX Effect v15

I am currently working on converting the code snippet to NGRX 15. As a newcomer to Angular, I could use some guidance. "@ngrx/effects": "^15.4.0" @Injectable() export class SnackbarEffects { @Effect({ dispatch: false }) cl ...

Steer clear of null validations when handling loaded .obj models in Three.js

In my Angular project, I am utilizing three.js to load a simple .obj file and animate it on the canvas. Everything is functioning properly, but I find myself needing to explicitly check for null in my animate() function to determine if the model has been ...

What is a more efficient way to write nested subscribe in Angular?

I am a beginner with RxJS and I'm interested in learning how to write clean code using it. I currently have a nested subscription that I've been trying to refactor without success. firstMethod() { this.testMethod(name) console.log(this.curren ...

Dynamic starting point iteration in javascript

I'm currently working on a logic that involves looping and logging custom starting point indexes based on specific conditions. For instance, if the current index is not 0, the count will increment. Here is a sample array data: const data = [ { ...

Angular has a built-in function to determine the next ID after deletion of some items

I am currently facing a situation where I have a list of contacts in a detailed view and navigating through them using the following code: <nav> <a [routerLink]="['/details', friend.id - 1 ]" *ngIf="!(friend.id == 1)"> P ...

Attempting to create distinct match matchups for every team in a manner reminiscent of the Swiss system format used in the 2024/25 UEFA Champion League

I've been working on devising a tournament pairing system modeled after the updated UEFA Champion League structure. The league phase involves 36 teams, categorized into 4 different pots. Each team is scheduled to play a total of 8 matches against 2 op ...

Bringing elements into perfect harmony in Angular

Seeking guidance on HTML alignment using bootstrap for prebuilt components like buttons. Struggling with aligning divs and looking to learn more about grouping them together for proper alignment. Goal is to center elements on screen one above the other. ...

Encountered a MongoDB error: $pushAll modifier is unrecognized when trying to update a model using Mongoid, Angular, and Rails frameworks

My stack includes angular-8 on the front-end and Rails(5.2) on backend with Mongoid(6.1). I'm working with a multi-level nested form for my Event model, which utilizes accepts_nested_attributes_for for Ticket that in turn accepts_nested_attributes_fo ...

Angular 7 running slowly when refreshing or changing routes

Operating System: Ubuntu 16.04 Node Version: v10.15.1 NPM Version: 6.4.1 I have recently developed a web application with two pages using less and HTML without any AJAX calls. Below is the content of my package.json file: { "name": "frontend", "vers ...

Having trouble invoking the "done" function in JQuery following a POST request

I am currently working on a Typescript project that utilizes JQuery, specifically for uploading a form with a file using the JQuery Form Plugin. However, after the upload process, there seems to be an issue when trying to call the "done" function from JQue ...

The Subscription request did not trigger as expected

I encountered an issue where I needed to call two services in the OnInit step, but the second request was not being sent. As a workaround, I had to call them sequentially, which I believe is not the most efficient way to write the code. (Both services on t ...

What is the best way to obtain a distinct collection from two arrays that eliminates the second appearance of an element based on a key's value, rather than the first as in the Lodash uniqueBy function?

Let's say I have two arrays... const arr1 = [ { id: 1: newBid: true } ]; const arr2 = [ { id: 1, newBid: false }, { id: 2, newBid: false } ]; My goal is to end up with an array that looks like this [ { id: 1, newBid: false }, { id: 2, newBid: fals ...

Issue with VS code/Angular where linter is unable to detect components imported from shared modules

Having an issue with Angular materials components in my project. I have a shared module where I import all the necessary Angular materials modules, and the code runs fine. However, in my html files in VS Code, I see red squiggly lines under every Angular m ...

Does anyone know how to retrieve the application version or import the package.json file? Can't seem to find the solution on

I need to display the version from the package.json file in my Angular application. To import it, I allowed importing json by adding a few extra lines in tsconfig.json: { "compilerOptions": { "module": "commonjs", ...

`ng-apexcharts` causing unit test failures

I've been working on integrating apexcharts and ng-apexcharts into my home component. While I was able to get it up and running smoothly, it seems to be causing issues with my unit tests. Despite researching possible solutions, I haven't been abl ...

Context failing to refresh value upon route changes

My current context setup is as follows: import { createContext, ReactNode, useState } from "react"; type props = { children: ReactNode; }; type GlobalContextType = { name: string; setName: (value: string) => void; }; export const Glob ...

Is it possible to convert JSON to enum using TypeScript?

I have a JSON string that looks like the following. { "type": "A", "desc": "AAA" } or { "type": "B", "desc" "BBB" } etc. How can I utilize an enum in Ty ...

Incorporate an external JS file (File A) that is dependent on another JS file (File B) into a TypeScript file within the context of Angular 4

Working on an Angular 4 project, I recently installed two external JS libraries using npm. They are now in the node_modules folder and usable in another TS file within my project. The issue arises because import B requires import A, preventing me from effe ...