I closely paralleled the approach taken in how-to-use-moment-js-library-in-angular-2-typescript-app but still get error TS2307: Cannot find module 'mqtt'.
npm install --save mqtt <s>typings install --save mqtt</s
that didn't find the typings but this did...
typings install mqtt --save --ambient
my tsconfig.conf looks like this
{ "compilerOptions": { "noImplicitAny": true, "module": "commonjs", "target": "ES5", "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "declaration": true }, "files": [ "ng2-mqtt.ts" ], "exclude": [ "node_modules" ] }
and ng2-mqtt.ts just has this...
export * from './src/mqtt.service'
and ./src/mqtt.service.ts has..
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, angular2@2.0.0-beta.17, typings 0.8.1, npm 2.14.20, node v4.4.1, Windows 7
Is it just going to be too hard to use Angular 2 with elements outside of its typescripted world?
I did the following to get mine working:
1) first install ng2-mqtt via package.json in dependencies and run the npm update so that you have it in your node_modules
2) in your index.html, be sure to include it:
<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) Add the mqtts mapping, like so to systemjs.config.js(see map):
System.config({ transpiler: 'typescript', typescriptOptions: {emitDecoratorMetadata: true}, map: { '@angular': 'node_modules/@angular', 'mqttws31': 'node_modules/ng2-mqtt/mqttws31.js' },
4) Import like you normally would:
import {Paho} from 'mqttws31'
5) use it in your @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); });
If all goes well, you should see your connection (assuming activemq): img
Refer to here for usage: https://github.com/icanos/ng2-mqtt
