Error rxjs_Observable __. Observable.forkJoin is not a function?

Question

I am using Rxjs in an angualr-cli .

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 an error and

 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 completely import Rxjs ( import 'rxjs'; ), everything will work. There is no mistake. I seem to understand what else is needed. I am also trying to import rxjs/Observable/forkjoin , but nothing helped.

Any pointers on how to do this.

Answer 1

As explained here , you have two options:

• Import all statements as a single package
• Or import each operator separately

In the first case, you will use the import as follows:

 import Rx from 'rxjs/Rx'; Rx.Observable.forkJoin(1,2,3) 

In the second, for example:

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

I believe that you are looking for the second option.

Answer 2

In one project, I used the following forkjoin code to load images, it works great.

 /** * 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()) ); }