2016-05-03 21 views
5

Ho stretto parallelo l'approccio adottato in how-to-use-moment-js-library-in-angular-2-typescript-app ma ancora ottenere error TS2307: Cannot find module 'mqtt'.Come utilizzare la libreria js (mqtt) nell'app angolare 2 dattiloscritto?

npm install --save mqtt 
<s>typings install --save mqtt</s 

che non ha trovato il tipizzazioni ma questo fatto ...

typings install mqtt --save --ambient 

mia tsconfig.conf assomiglia a questo

{ 
    "compilerOptions": { 
     "noImplicitAny": true, 
     "module": "commonjs", 
     "target": "ES5", 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "sourceMap": true, 
     "declaration": true 
    }, 
    "files": [ 
     "ng2-mqtt.ts" 
    ], 
    "exclude": [ 
     "node_modules" 
    ] 
} 

e ng2-mqtt.ts ha solo questo ...

export * from './src/mqtt.service' 

e ./src/mqtt.service.ts ha ..

import {Injectable} from 'angular2/core'; 
import * as mqtt from 'mqtt'; 
@Injectable() 
export class MqttService { 
    constructor() { 
    //mqtt.connect('ws://10.0.1.100:3333') 
    // ... 
    } 
} 

TSC -version 1.8.10, [email protected], tipizzazioni 0.8.1, NPM 2.14.20, nodo v4.4.1, Windows 7

Sarà semplicemente troppo difficile utilizzare Angular 2 con elementi al di fuori del suo mondo tipizzato?

risposta

2

ho fatto quanto segue per ottenere lavoro miniera:

1) prima installare NG2-MQTT tramite package.json in dipendenze ed eseguire l'aggiornamento NPM in modo da avere nelle vostre node_modules

2) a il vostro index.html, assicurarsi di includerlo:

<html> 
<head> 
    <title>whatever</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <script src="node_modules/ng2-mqtt/mqttws31.js" type="text/javascript"></script> 

3) Aggiungere la mappatura mqtts, in questo modo per systemjs.config.js (vedi mappa):

System.config({ 
transpiler: 'typescript', 
typescriptOptions: {emitDecoratorMetadata: true}, 
map: { 
    '@angular': 'node_modules/@angular', 
    'mqttws31': 'node_modules/ng2-mqtt/mqttws31.js' 
}, 

4) Importa come si farebbe normalmente:

import {Paho} from 'mqttws31' 

5) utilizzare nel vostro @Component:

this.client = new Paho.MQTT.Client("localhost", Number(61614), "myclientid_"); 

    this.client.onConnectionLost = (responseObject: Object) => { 
     console.log('Connection lost.'); 
     this.connected ="false"; 
     }; 

    this.client.onMessageArrived = (message: Paho.MQTT.Message) => { 
     console.log('Message arrived.'); 
     this.msg =message.payloadString; 
    }; 

    this.client.connect({ onSuccess: this.onConnected.bind(this); }); 

Se tutto va bene, si dovrebbe vedere il collegamento (ActiveMQ supponendo): img

fare riferimento a qui per l'uso: https://github.com/icanos/ng2-mqtt

0

Se si desidera più di un semplice wrapper per eclipse-paho, è possibile utilizzare la mia libreria. Gestisce la sottoscrizione/cancellazione di mqtt e il routing dei messaggi per voi, utilizzando osservabili. https://github.com/sclausen/angular2-mqtt

Problemi correlati