Angular2 Observable.forkJoin of observable variabl

Question

I'd like to ask you for help. I omitted code that I assume is not important. Let's imagine TS file that contains service calls:

// file: someService.ts

@Injectable()
export class SomeService {
     method1(){
         var observable = this.http.get(someUrl)
                          .map((res: Response) =><MyClass[]>res.json());
         return observable;
     }

     method2(){
         // Similar to method1
     }
}

// file: someComponent.ts

Please note, that this.method1observable and method2observable are properly assigned from parent (root) component and their type is Observable.

import {Observable}     from 'rxjs/Observable';

export class SomeClass {
    public m1: Observable<MyClass[]>;
    public m2: Observable<AnotherClass[]>

    ngOnInit() {
        Observable.forkJoin(this.m1,this.m2) //<- ERROR HERE
        .subscribe(data => {
            this.myFunction(data[0], data[1]);
            requestAnimationFrame(this.renderLoop);
        });
    }
}

I get "Uncaught ReferenceError: Observable is not defined". Don't you know what am I doing wrong? I saw some examples where Observable.forkJoin is called inside a service. But what if I want to call it inside a component?

Answer 1

You should avoid importing the whole rxjs library as it is quite big. If you have the following imports anywhere in your app, you will be importing the whole rxjs, so have that in mind:

import {Observable} from 'rxjs';

or

import {Observable} from 'rxjs/Rx';

You can instead import the individual features that you will be using, for example:

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

UPDATE: Starting with rxjs 5.5, the recommended way to import operators is:

import { range } from 'rxjs/observable/range';
import { map, filter, scan } from 'rxjs/operators';

const source$ = range(0, 10);

source$.pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
)
.subscribe(x => console.log(x))

Answer 2

You could try to import this way:

import {Observable} from 'rxjs/Rx';

instead of:

import {Observable} from 'rxjs/Observable';

You should also use an array to provide your observables to the forkJoin method:

ngOnInit() {
        Observable.forkJoin([this.m1,this.m2])
        .subscribe(data => {
            this.myFunction(data[0], data[1]);
            requestAnimationFrame(this.renderLoop);
        });
    }

And do not forget to specify inputs in @Component:

@Component({
    inputs: ['m1', 'm2']
})

Answer 3

you can refer to this link for more information about using forkjoin() method to run multiple concurrent http.get() requests.Here u can get a complete working example.

http://www.metaltoad.com/blog/angular-2-http-observables