Typescript rxjs Observable array concat

Question

I am having trouble using rxjs Observable.concat function with typescript. Getting an error "Cannot read property 'apply' of undefined"

The problem seems to be only within typescript and may be specific to rxjs version 5 concat. The code seems to work with rxjs V4.

Here is a simplified version of the code illustrating the problem...

 /*jshint esnext: true */

console.clear();
console.log('started');
class test{
    observableArray: Observable<any>[]=[];

    constructor(){
        this.observableArray.push(Rx.Observable.return("Line 1"));
        this.observableArray.push(Rx.Observable.return(56));
        this.observableArray.push(Rx.Observable.create((observer)=>{
             setTimeout(()=>{
                try{
                    observer.onNext("Waited for");
                    observer.onCompleted();
                }
                catch(err){
                     observer.onError(err);
                }
             },3000);
         }));
      }

    run(){
         // ... indeterminate number of observables pushed into array.
         // The problem lies below
         var source = Rx.Observable.concat(...this.observableArray);
         // seems to transpile into js: source =   Observable_1.Observable.concat.apply(Observable_1.Observable, this.observableArray);
         // In the chrome debugger I am getting error: Cannot read property 'apply' of undefined      

         var subscription = source.subscribe(
             function (x) {
                 console.log('Next: ' + x);
             },
             function (err) {
                 console.error('Error: ' + err);
             },
             function () {
                 console.log('Completed');
         });
      }
  }

}

Here is the jsbin: https://jsbin.com/naxeba/edit?html,js,console,output

sampathsris · Accepted Answer · 2018-07-15 05:19:48Z

6

OK, Problem solved.

Important note for users of reactive js version 5: In typescript with rxjs, to minimize app size each operator must be specifically imported for the function/operator to be included. So the line...

import {concat} from 'rxjs/operators/concat' must be inlcuded at the top of the typescript file for concat to work.

What confused me was that I was getting intellisense in VS2015 for the Observable.concat function even though the function had not actually been imported.

edited Jul 15, 2018 at 5:19

sampathsris

22.4k12 gold badges74 silver badges103 bronze badges

answered Apr 13, 2016 at 18:59

JeffC

2931 gold badge3 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Séverin Beauvais · Accepted Answer · 2018-11-01 20:38:27Z

2

I'm using rxjs 5.5.7 and had to use import 'rxjs/add/observable/concat';.

The code itself looks like: Observable.concat(...observables).subscribe etc

answered Nov 1, 2018 at 20:38

Séverin Beauvais

1391 silver badge5 bronze badges

1 Comment

Kildareflare Over a year ago

Additionally I had to change import { Observable } from 'rxjs/Observable'; to import { Observable } from 'rxjs';

Collectives™ on Stack Overflow

Typescript rxjs Observable array concat

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related