rethinkdb and angular2 with typescript

[ternes3]

Hey there,
i´m completely new in this kind of programming, with nodejs, angular2 and even typescript. I want to use rethinkdb as realtime data storage for my angular2 application. First step was to install the npm driver according to the right types definition for typescript2. Really confusing and a kind of pain in the ass, it isn´t well documented.

Well now I try to connect to a local rethinkdb instance like this:

var connection = null;
r.connect( {host: 'localhost', port: 28015}, function(err, conn) {
    if (err) throw err;
    connection = conn;
})
r.db('TestDB').tableCreate('test_yay').run(connection, function(err, result) {
    if (err) throw err;
    console.log(JSON.stringify(result, null, 2));
})

I even tried the hole stuff with '127.0.0.1' but i got this:

Uncaught DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
    at http://localhost:4200/polyfills.bundle.js:4288:27
    at XMLHttpRequest.open (eval at createNamedFn (http://localhost:4200/polyfills.bundle.js:3772:17), <anonymous>:3:31)
    at new HttpConnection (http://localhost:4200/vendor.bundle.js:105558:9)
    at http://localhost:4200/vendor.bundle.js:105692:18
    at http://localhost:4200/vendor.bundle.js:105705:12
    at Promise._execute (http://localhost:4200/vendor.bundle.js:92767:9)
    at Promise._resolveFromExecutor (http://localhost:4200/vendor.bundle.js:95045:18)
    at new Promise (http://localhost:4200/vendor.bundle.js:94641:10)
    at Function.<anonymous> (http://localhost:4200/vendor.bundle.js:105672:10)
    at Function.connect (http://localhost:4200/vendor.bundle.js:99547:16)
    at Object.489 (http://localhost:4200/main.bundle.js:260:51)
    at __webpack_require__ (http://localhost:4200/inline.bundle.js:53:30)
    at Object.484 (http://localhost:4200/main.bundle.js:49:94)
    at __webpack_require__ (http://localhost:4200/inline.bundle.js:53:30)
    at Object.364 (http://localhost:4200/main.bundle.js:24:74)
    at __webpack_require__ (http://localhost:4200/inline.bundle.js:53:30)
    at Object.619 (http://localhost:4200/main.bundle.js:412:18)
    at __webpack_require__ (http://localhost:4200/inline.bundle.js:53:30)
    at webpackJsonpCallback (http://localhost:4200/inline.bundle.js:24:23)
    at http://localhost:4200/main.bundle.js:1:1

In plain js with nodejs this kind of code works. I believe there is some kind of trouble between the driver, the typings and angular2. But for me as beginner in this topic it is really confusing to get the right address to complain, maybe someone of you have a idea for me, in best case a solution.

Update 1:
I am trying to unterstand whats going on, it seems so there is going something wrong:

url = protocol + "://" + this.host + ":" + this.port + host.pathname + "ajax/reql/";
...
xhr.open("POST", url + ("open-new-connection?cacheBuster=" + (Math.random())), true); // this throws the error.

When i add a protocol like http to my host it will combine it to http://http//127.0.0.1:28015undefinedajax/reql/open-new-connection?cacheBuster=0.9364257713950803, seems correct so, because its going to remove the : in my provided protocol to prevent malformed urls. Pretty confusing.

[chrisvariety]

RethinkDB is designed to be talked to by a server (e.g. a Node.JS server), not directly in the browser.

[ternes3]

oh ok. So best practise in my case is to use horizon?

[BartNetJS]

Yes indeed. And if you like to use rethinkdb directly from horizon, you can in embedded mode:
see, http://horizon.io/docs/embed/, topic 'Accessing the Rethinkdb r object'

[ternes3]

thanks a lot 👍

[markusfalk]

@ternes3: I ran into the same issue with the pathname being undefined.

I guess we both came from here: https://github.com/rethinkdb/angular2-typescript-example/blob/master/app.ts

In the example Angular talks to rethinkDB directly. I'm running rethinkDB in Docker and thought I could connect to it right away.

@chrisvariety: Is there no way around that middleware/proxy?

Do you guys know any instructions on how to talk to rethinkDB using Angular?

thanks :)

[rbasniak]

@markusfalk Hi, did you manage to figure it out how to use rethinkdb with Angular 2+?

[BartNetJS]

@rbasniak, I have uploaded a sample project here https://github.com/BartNetJS/AngularWithRethinkDB

[rbasniak]

@BartNetJS Thank you so much, This will be very helpful