Trying to make strophe.js dance to the Ionic tune

Ionic Framework ionic-v3
1

I have been trying to use strophe.js (XMPP library) in a new Ionic2 app. Now the fact that strophe.js in npm and that there is a DefinitelyTyped file available, does not seem to help me.
The complaint is that strophe.js does not export ‘Strophe’. I assume this should be done in the typings? According to the error :

[12:36:13] Error: ‘Strophe’ is not exported by node_modules\strophe\strophe.js (imported by .tmp\providers\shared-conn.js).

import {Strophe} from 'strophe';
...
@Injectable()
export class SharedConn {
 ...
 login (jid, host, pass) {
   this.connection = new Strophe.Connection(this.BOSH_SERVICE);
   this.connection.connect(jid+'@'+host, pass, this.onConnect);
 }

 onConnect(status) {
   console.log('onConnect: '+status);
 }
}

I dont quite follow the suggested solution here. It seems it is about tweaking rollup? Any guidance where that should be done?

The alternative way would be to treat it as raw javascript and use

declare var Strophe: any;

after including the script in the index.html.
This has not worked either, because it does not seem that the strophe.js script is actually included in the app. What am I missing? I put strophe.js in the www dir, but the script tag is missing in the served app. Am I missing anything obvious?

Does any one know how to get strophe.js to work in Ionic 2? Or failing that, if there is a working alternative XMPP library?

1 Like
2

I have managed to get it working by NOT using the npm installed version with DefinitelyTyped.

Steps to get it to work

  1. Copy strophe.js to the www dir (not the src dir)
  2. Include in index.html with
    <script src="strophe.js"></script>
  3. declare a dummy variable that matches the library
    declare var Strophe: any;
  4. use the dummy as per “normal”
    this.connection = new Strophe.Connection(this.BOSH_SERVICE);

This works, but is very un-TypeScript.
I still want to get it to work with DefinitelyTyped.

Any one with guidance here?

1 Like
3

I managed to install the DefinitelyTyped available for strophe (even though it’s for a different version), all syntax checks are OK, but when I run the code to create a connection with strophe it says it wasn’t found…
I even tried your solution but doesn’t work as well… Did you manage to get it working with typescript?

1 Like
4

Oh well, I think I finally figured it out!
You should install the DefinitelyTyped with npm install --save-dev @types/strophe in your project root folder.
Then copy strophe.js (the actual javascript file - not the directory - from node_modules/strophe.js or from https://github.com/strophe/strophejs/blob/master/strophe.js) to you www directory, and add <script src="strophe.js"></script> to your index.html file (inside the www directory).
You will have the typings and everything else. No need to add import {Strophe} from 'strophe.js' anywhere.

Obs: I had to change a few things in the strophe.d.ts in node_modules/@types/strophe, otherwise it would not transpile.

Let me know if it works for you.

1 Like
5

For me, I have to add the following dummy variables, otherwise it does not compile:

declare var Strophe: any;
declare var $iq: any;
declare var $pres: any;

But having done that, it works fine.

Strophe and TypeScript does not want to play nicely yet. Unfortunately I do not have enough depth of understanding yet to try and fix it.

For my next trick I want to add some of the Strophe plugins (roster and muc etc.). Will let you know how that goes :slight_smile:

1 Like
6

Thank you so much !!!

1 Like
7

thats no good !! @paulovitorjp adding the strophe.js to www is not enough i need it to work in typescript with a usual import.
ive tried to npm strophe ,typings and jquery and import it but i get an error here it is:

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import {Strophe} from ‘strophe’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’,

})
export class HomePage {

public connection: any ;

public BOSH_SERVICE: any=“http://52.32.***.5:5280/http-bind/” ;

constructor(public navCtrl: NavController) {

}

login() {

this.connection = new Strophe.Connection(this.BOSH_SERVICE);
this.connection.connect(‘ama****’+’@’+‘localhost’, ‘o***oop’,

this.onConnect);

console.log(“Hello World !”);

}

onConnect(status) {
console.log('onConnect: '+status);
}

the error:

WEBPACK_IMPORTED_MODULE_2_strophe.Strophe is undefined Stack trace: HomePage.prototype.login@http://localhost:8100/build/main.js:55747:9 View_HomePage_0/<@ng:///AppModule/HomePage.ngfactory.js:135:21 viewDef/handleEvent@http://localhost:8100/build/main.js:12170:98 callWithDebugContext@http://localhost:8100/build/main.js:13462:39 debugHandleEvent@http://localhost:8100/build/main.js:13050:12 dispatchEvent@http://localhost:8100/build/main.js:9070:12 renderEventHandlerClosure/<@http://localhost:8100/build/main.js:9662:20 decoratePreventDefault/<@http://localhost:8100/build/main.js:33505:53 fhttp://localhost:8100/build/polyfills.js:3:9644 NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@htt p://localhost:8100/build/main.js:4397:28 fhttp://localhost:8100/build/polyfills.js:3:9557 chttp://localhost:8100/build/polyfills.js:3:4812 t/this.invoke@http://localhost:8100/build/polyfills.js:3:10626

Any solutions i need it asap!!!

8

@bobnino sorry for the late response, didn’t see your question here before.

We couldn’t get it to work as a usual Typescript import, only the way described above.
Did you try to do what @DeepFreez mentioned above? That might solve your problem.

declare var Strophe: any;
declare var $iq: any;
declare var $pres: any;

Hope it helps