Angular2 Observable.forkJoin of observable variables - ReferenceError: Observable is not defined

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 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']
})