Guide to integrating the (mqtt) JavaScript library into your Angular 2 TypeScript application

Question

Guide to integrating the (mqtt) JavaScript library into your Angular 2 TypeScript application

I followed a similar approach as demonstrated in how-to-use-moment-js-library-in-angular-2-typescript-app but encountered the error message

error TS2307: Cannot find module 'mqtt'.

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

The above code did not find the typings, but this alternative method worked...

typings install mqtt --save --ambient

This is how my tsconfig.conf is configured:

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

The content of ng2-mqtt.ts is simply...

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

And ./src/mqtt.service.ts includes...

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 going to be challenging to integrate Angular 2 with external elements beyond its TypeScript ecosystem?

javascript typescript npm angular typing

Answer 1

Answer №1

To successfully set up my system, I followed these steps:

1) Start by installing ng2-mqtt through package.json in dependencies and running npm update to ensure it is added to your node_modules.

2) Make sure to include it in your index.html file:

<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 in systemjs.config.js as shown below (under map):

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

4) Import Paho as you would normally do:

import {Paho} from 'mqttws31'

5) Use it within 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 everything works correctly, you should establish a connection (assuming activemq): img

For further usage guidance, visit: https://github.com/icanos/ng2-mqtt

Answer 2

To successfully set up my system, I followed these steps:

1) Start by installing ng2-mqtt through package.json in dependencies and running npm update to ensure it is added to your node_modules.

2) Make sure to include it in your index.html file:

<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 in systemjs.config.js as shown below (under map):

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

4) Import Paho as you would normally do:

import {Paho} from 'mqttws31'

5) Use it within 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 everything works correctly, you should establish a connection (assuming activemq): img

For further usage guidance, visit: https://github.com/icanos/ng2-mqtt

Answer 3

Answer №2

I've been struggling to find a solution that works for me. I recently developed some code in Angular 8, so if you're facing similar issues, feel free to check out my code here. Hopefully, it helps you too!

Answer 4

I've been struggling to find a solution that works for me. I recently developed some code in Angular 8, so if you're facing similar issues, feel free to check out my code here. Hopefully, it helps you too!

Guide to integrating the (mqtt) JavaScript library into your Angular 2 TypeScript application

Answer №1

Answer №2

Similar questions

Determine if a given date falls within the previous 24 hours using Javascript

The code seems to be malfunctioning in a separate JS file, but oddly enough, it functions properly when placed within a <script> tag

What could be causing the Uncaught Error to persist even after using .catch()?

Having trouble extracting the responseText from the Ajax request

Why are polyfills-es2015, vendor-es2015, main-es2015, and other files blocked from loading because the MIME type is not allowed (text/html

Why is Handlebars {{body}} not rendering my HTML tags properly?

What causes TypeScript to convert a string literal union type to a string when it is assigned in an object literal?

"Exploring the world of Sharepoint Online WebParts with a touch

The functionality of `npm run` does not meet the expected behavior within a Docker container

Ways to modify CSS using JavaScript

Issue: Angular controller fails to load during testing with Poltergeist/CapybaraExplanation: While conducting

Ways to retrieve a variable from outside of a function

Node.js module mishap

Enhanced password encryption on the client side using jQuery ajax and PHP [advanced technique]

Issue with Angular: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables such as Arrays

Efficiently centering content in a grid layout using automatic fit repetition for optimized responsiveness

How to use the sha512 hash function in Node.js for Angular2 and Ionic2 applications

"Generating a unique, random HEX color using JavaScript from an array

Stop the repetition of event handlers by utilizing the .off() method to remove duplicates

What could be causing the Angular error related to this HttpHeader?