如何在angular 2 typescript app中使用（mqtt）js库？ [英] How to use (mqtt) js library in angular 2 typescript app?
问题描述
我与采用的方法非常相似how-to-use-moment-js-library-in-angular-2-typescript-app 但仍然得到错误TS2307：找不到模块'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
我的tsconfig.conf看起来像这样
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"
]
}
和 ng2-mqtt.ts 只有这个......
and ng2-mqtt.ts just has this...
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，类型0.8.1，npm 2.14.20，节点v4.4.1，Windows 7
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与其打字世界之外的元素一起使用？
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）首先通过package.json在依赖项中安装ng2-mqtt并运行npm update，以便在node_modules中使用它
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）在index.html中，请务必加入：
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）将mqtts映射添加到systemjs.config.js（参见map）：
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）像往常一样导入：
4) Import like you normally would:
import {Paho} from 'mqttws31'
5）使用它在@Component中：
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); });
如果一切顺利，你应该看到你的连接（假设activemq）：
img
If all goes well, you should see your connection (assuming activemq): img
请参阅此处了解用法：
https://github.com/icanos/ng2-mqtt
Refer to here for usage: https://github.com/icanos/ng2-mqtt
这篇关于如何在angular 2 typescript app中使用（mqtt）js库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
