2016-05-03 2 views
5

я тесно параллельно подход, в how-to-use-moment-js-library-in-angular-2-typescript-app, но до сих пор получить error TS2307: Cannot find module 'mqtt'.Как использовать (mqtt) js-библиотеку в угловом 2-х машинописном приложении?

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 -версии 1.8.10, [email protected], типизации 0.8.1, НПМ 2.14.20, узел v4.4.1, Windows 7

Будет ли слишком сложно использовать Angular 2 с элементами за пределами своего машинописного мира?

ответ

2

я сделал следующее, чтобы получить работу шахты:

1) первая установка NG2-MQTT через package.json в зависимости и запустить обновление НПМ, так что у вас есть в вашем 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

0

Если вы хотите больше, чем просто обернуть вокруг eclipse-paho, вы можете использовать мою библиотеку. Он обрабатывает mqtt подписки/отписки и маршрутизации сообщений для вас, используя наблюдаемые. https://github.com/sclausen/angular2-mqtt

 Смежные вопросы

  • Нет связанных вопросов^_^