如何在 Angular 2 typescript 应用程序中使用（mqtt）js 库？答案

【问题标题】：How to use (mqtt) js library in angular 2 typescript app?如何在 Angular 2 typescript 应用程序中使用（mqtt）js 库？
【发布时间】：2016-08-28 13:11:33
【问题描述】：

我与how-to-use-moment-js-library-in-angular-2-typescript-app 中采用的方法非常相似，但仍然得到error TS2307: Cannot find module 'mqtt'.

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

没有找到打字，但确实...

typings install mqtt --save --ambient

我的 tsconfig.conf 看起来像这样

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

而ng2-mqtt.ts 就是这个...

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

而./src/mqtt.service.ts 有..

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

将 Angular 2 与打字世界之外的元素一起使用会不会太难了？

【问题讨论】：

标签： javascript typescript npm angular typing

【解决方案1】：

我做了以下工作来让我的工作：

1) 首先在依赖项中通过 package.json 安装 ng2-mqtt 并运行 npm 更新，以便在 node_modules 中拥有它

2) 在你的 index.html 中，一定要包含它：

<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）添加mqtts映射，像这样到systemjs.config.js（见地图）：

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

4) 像往常一样导入：

import {Paho} from 'mqttws31'

5) 在你的@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); });

如果一切顺利，您应该会看到您的连接（假设为 activemq）： img

用法参考这里： https://github.com/icanos/ng2-mqtt

【讨论】：

【解决方案2】：

没有什么对我有用。在 Angular 8 中，我创建了代码，请Click Here 获取该代码。希望它有效。

【讨论】：