如何在 angular 1.5/es6 和 webpack 中使用 stomp

Question

我正在努力将 stomp 包含在我的项目中。使用 jmesnil/stomp-websocket 或后续的 forkJSteunou/webstomp-client 两个版本。

我尝试正确导入：

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 顶部有“function webpackUniversalModuleDefinition(root, factory)”，这显然没有达到目的）

可以通过直接在使用的控制器顶部“疯狂”导入来绕过此错误，但是所有业力测试都没有运行（错误是：错误：找不到模块“net”)，即使 node: { net: 'empty', tls: 'empty', dns: 'empty' } 已添加到 webpack.config.js。

在这一点上，我尝试的任何事情都感觉就像是奇怪的黑魔法。

是否存在已知可与我的设置正常工作的 lib 版本、角度包装器等的“星座”（角度 1.5 / es6 / webpack 1.14 / karma）？

Answer 1

不要将它作为依赖项添加到您的 Angular 模块中。 Stomp 库不是 Angular 模块。可能有可用的桥，但我认为没有必要。

要将 Stomp 与 Webpack 2 一起使用，只需在您使用 Stomp 的文件的顶部添加它，然后将其用作全局变量。

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(...);

}