angular - 尝试将 Stomp over SockJS 添加到 Angular 应用程序 : TS2307 Cannot find module

Question

我已经下载了一个用于连接到 websocket Spring channel 的工作普通旧式 javascript 示例，并且我正在努力将此功能导入到 Angular 2 应用程序中。

我已将导入添加到 package.json:

  "dependencies": {
    "@angular/common": "~2.2.1",
    (...)
    "stompjs": "2.3.3",
    "sockjs-client": "1.1.1"
  },

然后对 systemjs.config.js 进行建议的编辑:

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            (...)
            'sockjs-client': 'npm:sockjs-client',
            'stompjs': 'npm:stompjs'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            (...)
            'sockjs-client': {
                defaultExtension: 'js'
            },
            stompjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

但是当我添加导入

import {Stomp} from "stompjs";

我收到“TS2307:找不到模块”错误消息，代码编译为:

var stompjs_1 = require("stompjs");

导致无效的 http url:

http://localhost/myapp/node_modules/stomp-client

而不是 JS 文件的路径。

我在这里做错了什么？我搜索了很多答案，例如这里:How to use moment.js library in angular 2 typescript app?我尝试过做类似的事情。我还尝试过其他导入语法，例如:

import * as Stomp from 'stompjs';

但没有任何作用。

如何在 Angular2 中使用这两个库？

Answer 1

您需要在 systemjs.config.js 中写入库中 javascript 文件的完整路径:

例如，对于 stompjs，根据 Github 上的存储库，它可能是:

map {
    (...)
    'stompjs': 'npm:stompjs/lib/stomp.min.js'
},
packages: {
    // Remove stompjs from here, because you already have the full path
}

之后，您可以使用以下语法使用您的库:

import * as stomp from 'stompjs';

您仍然会遇到错误错误 TS2307:找不到模块，但至少它可以在您的浏览器中运行。

希望对您有所帮助。