TypeError: Cannot read property 'Observable' of undefined

[kevincaradant]

Hi everyone,

i try to create an example with es6 syntax.

I meet a problem that i don't understand: ERROR:

angular.js:13920 TypeError: Cannot read property 'Observable' of undefined
    at new RxjsService (http://localhost:3001/bundle.js:78661:35)
    at Object.rxjsFactory (http://localhost:3001/bundle.js:78683:12)
    at Object.invoke (http://localhost:3001/bundle.js:50825:20)
    at Object.enforcedReturnValue [as $get] (http://localhost:3001/bundle.js:50664:38)
    at Object.invoke (http://localhost:3001/bundle.js:50825:20)
    at http://localhost:3001/bundle.js:50624:38
    at getService (http://localhost:3001/bundle.js:50771:40)
    at injectionArgs (http://localhost:3001/bundle.js:50795:59)
    at Object.invoke (http://localhost:3001/bundle.js:50817:19)
    at $controllerInit (http://localhost:3001/bundle.js:56461:35) <div ui-view="mainView" class="anim-in-out anim-slide-below-fade ng-scope" data-anim-speed="300">

This is my code:

class RxjsService {
    constructor(rx) {
        this.rx = rx;
        // this.rxjsFactoryObserver = rxjsFactoryObserver;
        console.log(this.rx); // it's undefined
        this.rxjsFactory$ = new this.rx.Observable.create((observer) => {
            this.rxjsFactoryObserver = observer;
        }).share();
        this.data = {
            users: [
                {name: 'John Rambo', isVisible: true, age: 32},
                {name: 'Pablo Picasso', isVisible: true, age: 64}
            ]
        };
    }

    getUsers() {
        this.rxjsFactoryObserver.next(this.data.users);
    }

    addUser() {
        this.data.users.push({name: 'John Kennedy', isVisible: true, age: 87});
        this.rxjsFactoryObserver.next(this.data.users);
    }

    static rxjsFactory() {
        return new RxjsService();
    }
}
RxjsService.$inject = ['rx'];

export default RxjsService.rxjsFactory;

And where i import files (index.js):

import rx2 from 'rx/dist/rx.all.min';
import rx from 'rx-angular';
// Create our app module
export const demoModule = angular.module('demo', [
    'rx'
]);

Any idea ? thank you ! :)

[ilazarte]

I wasn't able to inject rx either with a similar setup. I wanted to use observeOnScope. Was on 1.1.3 tried 1.0.4, didn't work so I went back to watches.

[kevincaradant]

oki that works now. Someone help me on the Angular Gitter.

It's because I don't have declare the call of my Service correctly .

Look at this little correction but that change everything because I didin't inject the rx library in my static function in the initial thread.

class RxjsService {
    constructor(rx) {
        this.rx = rx;
        this.rxjsFactoryObserver = null;
        this.rxjsFactory$ = new this.rx.Observable.create(observer => {
            this.rxjsFactoryObserver = observer;
        }).share();
        this.data = {
            users: [
                {name: 'John Rambo', isVisible: true, age: 32},
                {name: 'Pablo Picasso', isVisible: true, age: 64}
            ]
        };
    }

    getUsers() {
        this.rxjsFactoryObserver.next(this.data.users);
    }

    addUser() {
        this.data.users.push({name: 'John Kennedy', isVisible: true, age: 87});
        this.rxjsFactoryObserver.next(this.data.users);
    }
}

function Factory(rx) {
    'ngInject';
    return new RxjsService(rx);
}

export default Factory;

I hope that will help you @ilazarte