Error rxjs_Observable__.Observable.forkJoin is not a function?

Question

I am using Rxjs in an angualr-cli application.

in viewer.component.ts

    //Other Imports
    import { Observable } from 'rxjs/Observable';
    //omitting for brevity
   export class ViewerComponent implements OnInit, AfterViewInit, OnDestroy {
    someFunction(someArg){
    //omitting for brevity
    let someArray: any = [];
    //Add some info
    Observable.forkJoin(someArray).subscribe(data => {
              //Do something with data
            });
    }
    //omitting for brevity
    }

I get and error as

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_2_rxjs_Observable__.Observable.forkJoin is not a function
    at ViewerComponent.webpackJsonp../src/app/component/viewer.component.ts.ViewerComponent.someFunction(http://localhost:4200/main.bundle.js:4022:73)
    at http://localhost:4200/main.bundle.js:3951:31

But if I Import Rxjs completely (import 'rxjs';) everything works. No error. I cont seem to understand whats additional that needed. I also tries importing rxjs/Observable/forkjoin but nothing to avail.

Any pointers on how to go about this.

I have updated the question. Completely means `import 'rxjs';` — Ankesh, Jun 25 '17 at 06:41

Max Koretskyi · Accepted Answer · 2017-06-25T07:05:04.773

31

As explained here, you have two options:

Either import all operators as a single package
Or import each operator individually

In the first case you would use import like this:

import Rx from 'rxjs/Rx';

Rx.Observable.forkJoin(1,2,3)

In the second like this:

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

I believe what you're looking for is the second option.

edited Jun 25 '17 at 07:05

answered Jun 25 '17 at 06:51

Max Koretskyi

101,079
60
333
488

Thank Maximus, I think best practice is the 2nd option? – Tiep Phan Jun 25 '17 at 06:59
Thanks, Worked like charm :) – Ankesh Jun 25 '17 at 09:13
1

The first option was the solution for me. Thanks! – Fintan Kearney Oct 19 '18 at 12:30

score 1 · Answer 2 · answered Oct 30 '19 at 20:49

1

For RxJS v6.5+, it is now:

import { forkJoin } from 'rxjs';

https://www.learnrxjs.io/operators/combination/forkjoin.html

answered Oct 30 '19 at 20:49

VSO

11,546
25
99
187

score 1 · Answer 3 · answered Apr 21 '20 at 10:12

Use the forkJoin Operator as a function by importing forkJoin instead of importing Observable.
Use forkJoin.subscribe() in place of Observable.forkJoin.subscribe()

import { forkJoin } from 'rxjs/observable/forkJoin'

export class ViewerComponent implements OnInit, AfterViewInit, OnDestroy {
    someFunction(someArg){
      let someArray: any = [];
      forkJoin(someArray).subscribe(data => {
      });
    }
}

Source Code : https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/forkJoin.ts

score 0 · Answer 4 · answered Jan 17 '19 at 22:48

In one project I used the following forkjoin code to upload images, it works perfectly.

/**
       *  Upload multiple image and then update the feature
       */
      public uploadImages(apiParams: any[], imageItems: any[]): Observable<any> {
        if (imageItems.length === 0) return;

        let promises = [];
        for (let imageItem of imageItems) {
          promises.push(this.uploadImage(apiParams, imageItem));
        }
        return Observable.forkJoin(...promises);
      }

      /**
       * upload single image
       */
      public uploadImage(apiParams: any[], imageItem: any): any {
        let _formData = new FormData();
        _formData.append("UploadedImage", imageItem,  (new Guid()).toString()+'.png');
        const imageApiUrl = StringFormatter.format(imagePoints.create, apiParams);
        return Observable.fromPromise(
          fetch(imageApiUrl, {
            method: "POST",
            body: _formData
          })
          .then(result => result.json())
        );
      }

Error rxjs_Observable__.Observable.forkJoin is not a function?

4 Answers4

Linked