網站搜尋

typescript - 嘗試將 Stomp 加到 SockJS 到 Angular 應用:TS2307 找不到模組


我已經下載了一個可用的純 JavaScript 範例,用於連接到 WebSocket Spring 通道,但我在將此功能導入 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 網址:

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

而不是 JS 檔案的路徑。

我在這裡做錯了什麼?我已經查閱了許多 Stack Overflow 的答案,例如這裡:如何在 Angular 2 TypeScript 應用中使用 moment.js 庫?我也嘗試了做所有類似的操作。我還嘗試了其他的導入語法,比如:

import * as Stomp from 'stompjs';

但什麼都不起作用。

如何在 Angular2 中使用這兩個函式庫?

答案#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';

你仍然會遇到錯誤 error TS2307: Cannot find module,但至少它可以在你的瀏覽器中運作。

我希望這有幫助。

答案#2

這似乎為我解決了這個錯誤:

npm install --save-dev @types/sockjs-client
npm install stompjs