2017-06-16 103 views
2

我很努力在我的項目中包含重踏。使用jmesnil/stomp-websocket或次級forkJSteunou/webstomp-client這兩個版本。如何使用stomp與角度1.5/es6和webpack

我試圖正確導入:

import Stomp from 'stompjs';//or 'webstomp-client'; 
import SockJS from 'sockjs-client'; 

,並加載它喜歡:

angular.module('app', [ 
uiRouter, ngTranslate, ngTranslateStaticFilesLoader, ngResource, ngFilter, 
uiBootstrap, Stomp, SockJS 
]) 

但我得到以下錯誤(這兩個版本):

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: 
Error: [$injector:modulerr] Failed to instantiate module {"VERSIONS":{"V1_0":"1.0","V1_1":"1.1","V1_2":"1.2"}} due to: 
Error: [ng:areq] Argument 'module' is not a function, got Object 

(即使webstomp.js在頂部有「功能webpackUniversalModuleDefinition(根,工廠)」,這顯然不是滿足它的目的)

有可能通過導入的方式繞過這個錯誤「瘋狂」直接在上面的控制器,其中使用的,但後來所有的業力測試沒有運行(錯誤是:錯誤:無法找到模塊「淨」) ,即使node: { net: 'empty', tls: 'empty', dns: 'empty' }已添加到webpack.config.js。

在這一點上,我所嘗試的只是感覺像奇怪的黑魔法。

是否有一個「星座」的lib版本,角包裝等知道適合我的設置(角1.5/es6/webpack 1.14 /卡瑪)?

回答

3

不要將它作爲依賴項添加到您的角度模塊。 Stomp庫不是一個角度模塊。可能有橋,但我認爲這不是必要的。

要將Stomp與Webpack 2一起使用,只需在使用Stomp的文件的tomp處進行操作,然後像使用全局變量一樣使用它。

const Stomp = require("stompjs/lib/stomp.js").Stomp; 

內部控制器/服務:

Stomp.client(...); 

編輯

該解決方案將是單元測試有點難度,因爲你將不能夠方便地更換依賴「角度的方式」。爲了解決這個問題,你可以在你的主模塊文件中定義它作爲常量,而不是使用AngularJS提供的DI。

主模塊文件

const Stomp = require("stompjs/lib/stomp.js").Stomp; 

angular 
    .module('app', [ 
     // dependencies 
    ]) 
    .constant('Stomp', Stomp) 
    // other controllers/services/etc. 

控制器/服務

function MyController(Stomp) { 

    Stomp.client(...); 

} 
+0

您好。非常感謝。我試過了,它可以和Stomp一起使用。隨着常數的增加,我可以將它注入到控制器中,這看起來更清潔,假設全局變量在那裏。我想它可以在run()函數中被刪除,就像lodash一樣。我現在正在努力的是SockJS,它拒絕接受同樣的待遇。但是這種方法似乎可以跺腳。 – Olivvv