Ionic 2 import wampy and using it

Ionic Framework ionic-v3
1

Hi, I’m totally new to angular 2 and typescript, i came from python and basic knowledge of ionic 1.
I’m trying to use wampy.js with no success, i cant build my app with wampy. And im using OSX El Capitan
I start de app with:
$ ionic start FOO sidemenu --v2 --ts && cd FOO && mkdir -p www/extlibs && wget https://raw.githubusercontent.com/KSDaemon/wampy.js/dev/build/wampy.js -O www/extlibs/wampy.js

Then, if I use: npm install --save @types/wampy

$ npm install --save @types/wampy
foo@ /Users/grizmio/Proyectos/ionic_beta/FOO
└── @types/wampy@2.0.18

npm WARN foo@ No repository field.
npm WARN foo@ No license field.

$ !find
find . -iname ‘wampy’
./node_modules/@types/wampy
./www/extlibs/wampy.js

then in page1.ts:
import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import * as X from ‘wampy’;

@Component({
…

$ ionic run ios throws and error:
TypeScript error: FOO/app/pages/page1/page1.ts(3,20): Error TS2307: Cannot find module ‘wampy’.

If instead of npm install --save @typeswampy i use: $ typings install dt~wampy --global --save
and in page1.ts:
import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import * as f from ‘wampy’;
@Component({
…

$ ionic run ios works

but, how can i use it?
export class Page1 {
w: wampy.wampy; // Error TS2305: Module ‘“wampy”’ has no exported member ‘wampy’.
w: wampy; // Error TS2305: Module ‘“wampy”’ has no exported member ‘wampy’.
Error TS2305: Module ‘“wampy”’ has no exported member ‘Wampy’.
constructor(private navController: NavController) {

if instead i use:
import {Wampy} from ‘wampy’;
…
w: Wampy; // Error TS2305: Module ‘“wampy”’ has no exported member ‘Wampy’.

i tried with: $ npm install wampy --save
but same errors.

if i import twampy with:
import wampy from ‘wampy’;
and use it with: “ws: wampy;” throws: Error TS2304: Cannot find name ‘wampy’.

all errors happen too with:
import * as wampy from ‘wampy’;

maybe knowing index.d.ts content structure could help you to “guess”/deduce my errors:
declare module “wampy” {
alotof interfaces

var wampy: WampyInstance;
export default wampy;

… }

ionic info:
Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.3.0
Xcode version: Xcode 7.3.1 Build version 7D1014

thanks

2

Now it almost works, but this thread can be marked as resolve,
2 days trying to get it work, then i asked here and magically I re-read https://www.typescriptlang.org/docs/handbook/interfaces.html.
using:
import wampy from ‘wampy’;
…
ws: any;
…
this.ws = new wampy(‘ws://socket.server.com:5000/ws’, { autoReconnect: false });
compile and launch, but it throws EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
but, thats ANOTHER problem, a typescript one which means: “Learn typescript first” :smiley:

3

So there’s a few issues here.

npm install @types/wampy --save

This is the new typescript 2.0 way of handling 3rd party typings. TS 2.0 is still in beta and not officially released. So this will not work at the moment.

The correct way to do what you want to do is

typings install dt~wampy --global --save

This is how our setup works.

Then to use the module, you can do the following

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

// Import everything from 'wampy', and store 
// it under a local variable of wampy
import * as wampy from 'wampy';

export class Page1 {
  // create a new property call ws, which is a new instance of our wampy import
  public ws = new wampy('/ws/', { realm: 'AppRealm' });
  constructor()}
    this.ws.subscribe('system.monitor.update', (data)=> { console.log('Received system.monitor.update event!'); })
    .subscribe('client.message', (data)=> { c 
  }
}
4

Hi, thanks for your help! :slight_smile:

I did what you wrote, but I keep making mistakes due my lack of knowledge, but I keep reading and running examples to learn.

I started from a clean “ionic start” with:
$ ionic start Palta sidemenu --v2 --ts && cd Palta && typings install dt~wampy --global --save && npm install wampy --save

Then I copy/pasted your:
import * as wampy from ‘wampy’;
and:
public ws = new wampy(’/ws/’, { realm: ‘AppRealm’ });
where you said.

I run:
$ ionic build
and completes with success and with an error:
…
[21:33:39] Finished ‘sass’ after 1.14 s
TypeScript error: /Users/grizmio/…/ionic_beta/Palta/app/pages/page1/page1.ts(10,15): Error TS2351: Cannot use ‘new’ with an expression whose type lacks a call or construct signature.
[21:33:42] Finished ‘watch’ after 4.54 s
…

Just for curiosity I run: $ ionic serve -cl
then look the source of emulators and tried: http://localhost:8100/build/js/app.bundle.js
Cannot GET /build/js/app.bundle.js

$ ionic build android
And looked inside the apk and app.bundle.js is missing.
app.bundle.js was never built due to the errors above.