Try to add Stomp over SockJS to angular app: TS2307 Cannot find module

Question

I've downloaded a working plain-old-javascript example for connecting to websocket Spring channel and I'm struggling with importing this functionality to angular 2 application.

I've added imports to package.json:

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

Then a suggested edit to 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);

But when I add the import

import {Stomp} from "stompjs";

I get the "TS2307: Cannot find module" error message and the code compiled to:

var stompjs_1 = require("stompjs");

results in invalid http url:

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

instead of path to JS file.

What I've made wrong here? I've searched many SO answers, such as here: How to use moment.js library in angular 2 typescript app? and I've tried to do everything similar. I've also tried alternative import syntaxes like:

import * as Stomp from 'stompjs';

but nothing works.

How to use both libraries in Angular2?

score 2 · Answer 1 · answered Nov 25 '16 at 16:44

You need to write the full path to the javascript file in your library, in systemjs.config.js :

For example, for stompjs, according to the repo on Github, it might be :

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

After, you can use your library with this syntax :

import * as stomp from 'stompjs';

You will still have the error error TS2307: Cannot find module, but at least it will work in your browser.

I hope it help.

Try to add Stomp over SockJS to angular app: TS2307 Cannot find module

1 Answers1