Subject.onNext is not a function

Question

I'm trying to utilize some reactiveX in my http code. To do so, I'm creating a Subject, and trying to call the onNext function, but I get an error saying subject.onNext is not a function.

html:
<input #search (input)="generateSuggestions($event.target.value)">

ts:

import { Jsonp, Response } from 'angular2/http';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject'
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounce';
import { Injectable } from 'angular2/core';

@Injectable()
export class SearchService {
    queryStream = new Subject();

    generateSuggestions(query: string) {
        this.queryStream.onNext(query)
            .debounce(500)
            .map(
                query => this.jsonp.request( `http://urlendpoint/${query}` )
                        .map( (res: Response) => res.json() )
                        .subscribe( results => console.log(results) );
            )
    }
}
var queryStream = new Subject();

ORIGINAL EXCEPTION: TypeError: this.queryStream.onNext is not a function

All of my plain http functions work ( this.jsonp.request(url/query).map().subscribe() ) but the onNext operator doesn't work. I'm also having trouble importing flatMap, which doesn't seem to be in the same 'rxjs/add/operator/...' folder as map and debounce.

Answer 1

replace

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject'
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounce';

With :

import * as Rx from "rxjs/Rx";

and

Replace Subject with Rx.Subject

Replace onNext with next