How to use (mqtt) js library in angular 2 typescript app?

javascript typescript npm angular typing

10,782

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

10,782

Author by

mcktimo

I am interested in working in software/hardware development as part of an Agile team. My working experience includes: Running a construction company that created over $20 million dollars worth of housing Working in a cognitive sciences research lab building computer models of memory, learning and visual recognition Teaching Humanities, Math and Physics in an urban high school in which every student had a laptop. My skills include: Software development for the construction industry Project management of scattered site development projects with budgets in excess of $1 million. Workforce development and training. Ability to model complex systems and big data. Software development for education. Curriculum development, implementation and evaluation.

Updated on August 11, 2022

Comments

mcktimo almost 2 years

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, [email protected], 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?