Angular2 RxJS getting 'Observable_1.Observable.fromEvent is not a function' error

Question

I'm using AngularJS 2 Beta 0 and I'm trying to create an RxJS Observable from an event on a window object. I believe I know the formula for capturing the event as an Observable in my service:

var observ = Observable.fromEvent(this.windowHandle, 'hashchange');

The problem is that every time I try run this code, I get an error stating that 'fromEvent' is not a function.

Uncaught EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: Observable_1.Observable.fromEvent is not a function

This seems to imply to me that I'm not handling my import correctly now that RxJS is not included in the build of Angular 2, though the rest of my application functions properly, which to me means that RxJS is where it is supposed to be.

My import in the service looks like this:

import {Observable} from 'rxjs/Observable';

Though I have also tried to use this instead (with the appropriate changes to the code), with the same results:

import {FromEventObservable} from 'rxjs/observable/fromEvent';

I have the following configuration in my Index.html:

<script>
    System.config({
        map: {
            rxjs: 'node_modules/rxjs'
        },
        packages: {
            'app': {defaultExtension: 'js'},
            'rxjs': {defaultExtension: 'js'}
        }
    });
    System.import('app/app');
</script>

Can somebody tell me what I'm doing incorrectly?

sclausen · Accepted Answer · 2017-07-04 13:50:20Z

103

Its definitly not needed to import all operators at once! You just imported fromEvent wrong. You could do it like this:

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

EDIT: In addititon to what I already wrote: tree-shaking with the AoT-Compiler of angular removes unused code, based on what you import. If you just import some objects or functions from rxjs/rx, the compiler can't remove anything. Always import just, what you need!

edited Jul 4, 2017 at 13:50

answered Feb 12, 2016 at 6:30

sclausen

1,7183 gold badges16 silver badges23 bronze badges

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

4 Comments

Mark Over a year ago

Note that you have to capitalize the 'O' in rxjs/Observable. I looked for this error forever.

ccnokes Over a year ago

This is the better answer. Importing all of rxjs will definitely slow your startup time.

seangwright Over a year ago

This is definitely the better solution even if @Michael_Oryl's solves it.

Anton Strogonoff Over a year ago

Note: ng serve with --aot might not pick up the new import and keep complaining until you kill it and start it again.

Community · Accepted Answer · 2017-05-23 12:34:42Z

74

The problem seemed to be that the import statement should look like this:

import {Observable} from 'rxjs/Rx';

Note that Observable is being brought in from rxjs/Rx instead of from rxjs/Observable. As @EricMartinez mentions, pulling it in this way will automagically get you all of the operators (like .map()).

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Dec 21, 2015 at 14:10

Michael Oryl

21.8k15 gold badges82 silver badges119 bronze badges

4 Comments

Mahmoud Hboubati Over a year ago

why do we add everything from rxjs, couldn't we add only the needed parts

SgtPooki Over a year ago

@MahmoudHboubati yes you can bring in just the needed parts. See the answer below.. which is the proper way to import things so that you don't bloat your asset bundle.

Mackelito Over a year ago

This is not recommended usage.. you should NEVER import ALL operators (thus never use from 'rxjs/RX'

Anurag pareek Over a year ago

Importing all operators have just overloaded the app, Its recommended to include only required operators.

Collectives™ on Stack Overflow

Angular2 RxJS getting 'Observable_1.Observable.fromEvent is not a function' error

2 Answers 2

4 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Linked

Related