I'm having trouble getting forkJoin to trigger

As I create a guard in Angular, I am faced with the challenge of making two distinct HTTP requests and then deciding whether to continue based on both responses. After some research, I learned that forkJoin is the recommended approach for this task, but for some reason mine doesn't seem to be working.

In my code implementation, I have:

this.userService.watchCurrentUser().subscribe(data => { console.log(data) });
this.orgService.watchOrg().subscribe(data => { console.log(data) });
Observable.forkJoin(
    this.userService.watchCurrentUser(),
    this.orgService.watchOrg()
).subscribe(data => {
    console.log(data);
});

I added the first two subscriptions as an additional check to see if the calls were being executed, which they are since I can see the logs. However, I never get any output from the forkJoin.

At the beginning of my file, I import it like so:

import { Observable, BehaviorSubject } from 'rxjs/Rx';
import 'rxjs/add/observable/forkJoin';

Could there be something essential that I'm overlooking when trying to use forkJoin?

Answer №1

When using Observable.forkJoin(), it is crucial that all source Observables emit at least one item and complete their execution.

Have you confirmed that both of your source Observables are completing?

If they are not able to complete based on their internal logic, perhaps consider utilizing zip() or combineLatest() instead.

Answer №2

If you are functioning as a guard, you only require one outcome from each stream. In order to achieve this, follow the code snippet below:

Observable.forkJoin(
    this.userService.watchCurrentUser().first(),
    this.orgService.watchOrg().first()
).map(data => {
    let permitted: boolean;
    // Perform necessary data checks.
    return permitted; 
});

The provided code utilizes forkJoin to merge the initial result of two observables, with both results subsequently mapped to a boolean value.

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

Angular not successfully passing ID in for loop

I am trying to pass the res[i].id value to my ArrayList while maintaining the sequence. Can anyone help me understand why 809 and 806 are not getting added to the arrayList correctly? 0: {id: 0, ArrayListID: 809, VarName: "TEST001A"} 1: {id: 0, ...

Using mat-select along with formControl to establish the default value

I'm struggling to assign a default value to my formControl, but it doesn't seem to be working as expected. select-hint-error-example.ts export class SelectHintErrorExample { animalControl = new FormControl('', [Validators.required]) ...

Learn how to implement React Redux using React Hooks and correctly use the useDispatch function while ensuring type-checking

I'm curious about the implementation of Redux with Typescript in a React App. I have set up type-checking on Reducer and I'm using useTypedSelector from react-redux. The only issue I have is with loose type-checking inside the case statements of ...

The combination of React, Typescript, and MaterialUI Paper results in a stunning design with a sleek and

Whenever I include <Paper elevation={0} /> within my react component, I encounter the following issue: Cannot read properties of undefined (reading 'background') TypeError: Cannot read properties of undefined (reading 'background&apos ...

Harnessing the power of Material-UI's muiThemeable with Typescript

I'm trying to access the current theme colors within a custom React component. The example I'm referencing is from Material UI http://www.material-ui.com/#/customization/themes Despite attempting various approaches, I'm unable to get Typesc ...

Adding a text box dynamically to an Angular form upon clicking the Add button is currently not functional

I have created a basic angular form that should add text fields dynamically when the user clicks on a button. However, when I click the "Add" button, it does not add a new text box as expected. Can anyone help me figure out what I am missing? app-componen ...

Angular Router navigation not functioning as expected

I have successfully implemented routing in my Angular project. Below are the routes defined in the root module: const appRoutes: Routes = [ { path: '', component: LoginComponent }, { path: 'dashboard', canActivate: [AuthGuard], comp ...

Receiving numerous inputs from a single text box using Angular

I'm facing an issue when trying to accept input as an array in Angular. Below is my code snippet: <input type="number" [(ngModel)]="valuesArray"> <button (click)="PerformAction()" > find</button> va ...

Switch up the component's style based on the route being accessed

Is there a way to dynamically load CSS styles in a component based on URL parameters? The idea is that the user will access the page using a URL structure like SOME_URL/{screenSize}/{type}. While the component remains the same, the CSS styling should chang ...

What does the error "Cannot access property 'length' of null when using 'angular'" mean?

I am currently working on counting the initial li items and encountering an issue with 'Cannot read property 'length' of null' after fetching data from the server using a unit test case. Here is my code: import { ComponentFixture, Tes ...

Repetitive cycling through an array

My array consists of classes: const transferClasses = [ { id: "c5d91430-aaab-ed11-8daf-85953743f5cc", name: "Class1", isTransfer: false, children: [], }, { id: "775cb75d-aaab-ed11-8daf-85953743f5cc", ...

Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

One of the goals for my app is to have multiple themes, including Angular Material themes, with the ability to define custom colors for specific components and elements that are not part of Angular Material. It's important that when I change a theme, ...

Angular Routing: Dynamically loading modules as children within lazy loaded modules

I am working on a complex application where I need to load a module as a child of lazy loaded modules. For instance, I want the URL path to look like this: https://localhost:8080/ui/examplemodule/new The examplemodule and new are separate modules with t ...

The presence of a setupProxy file in a Create React App (CRA) project causes issues with the starting of react-scripts,

I have implemented the setupProxy file as outlined in the documentation: const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( '/address', proxy({ target: 'http ...

The system encountered an issue: unable to determine the property 'endsWith' of an undefined value

As I delve into writing my initial unit tests for the components, certain issues have arisen: TypeError: Cannot read property 'endsWith' of undefined. How can I define the data.iconPath in my test to resolve this error? Presenting my component ...

Troubleshooting: The reason behind my struggles in locating elements through xpath

There is a specific element that I am trying to locate via XPath. It looks like this: <span ng-click="openOrderAddPopup()" class="active g-button-style g-text-button g-padding-5px g-margin-right-10px ng-binding"> <i class=&quo ...

I'm trying to figure out how to redirect only the empty path using the new router in Angular 2. Can anyone

Environment: Upgraded to RC4 with brand new router Here is the current configuration of my router.. export const routes: RouterConfig = [ {path: 'search-documents', component: SearchDocumentsComponent}, { path: '', pathMat ...

Utilize the component template content within Angular 2 for enhanced functionality

Looks like someone missed the memo on time stamps, asking a question after it has already been answered! Struggling with Angular 1 vs. Angular 2 differences, making simple tasks in Angular 1 seem overly complicated in Angular 2. In Angular 1, I had a que ...

Tips for passing parameters to an Angular compilation process?

Typically, Angular gets its environment settings from environment.[env].ts files during build time. However, I find myself in a situation where I need to be able to override those settings based on arbitrary parameters like apiUrl or connectionString that ...

An Easy Guide to Incorporating react-cookie into TypeScript Projects

I am currently developing an application in React using the React template provided by Visual Studio 2017. My goal is to incorporate react-cookie into my project. After installing this library with the command: npm install react-cookie However, when I at ...