Search code examples
angularstompsockjs

angular 2 and stomp: Can't resolve all parameters


I keep having and error, and have seen that

Error: Can't resolve all parameters for DataComponent

I don't know how I can debug it either where it comes from. Any help or hint would be appreciated.

Datacomponent.ts

import { Component, OnInit, Inject } from '@angular/core';

import { Message, Client, Stomp } from 'stompjs';
import * as SockJS from 'sockjs-client';

@Component({
    selector: 'data',
    template: `
        <div id="raw">
            <h2>Messages</h2>
            <p>{{message}}</p>
        </div>
        `,
})
export class DataComponent implements OnInit, OnDestroy {
    constructor(private client : Client) { }

    mq_username = "guest";
    mq_password = "guest";
    mq_vhost    = "/";
    mq_url      = 'http://localhost:15674/stomp';
    mq_queue    = "/exchange/helloworld";

    public message: string;

     /** Callback on_connect to queue */
    public on_connect = () => {
        console.log('client', this.client);
        this.client.subscribe(this.mq_queue, function(message: Message) {
            this.message = message.body; 
        })
    }
    public on_connect_error(){
        console.log('connection failed');
    }

    ngOnInit() {
        this.client = Stomp.client(this.mq_url);
        this.client.connect(
            this.mq_username,
            this.mq_password,
            this.on_connect,
            this.on_connect_error,
            this.mq_vhost
        )
    }
}

In the tsconfig.ts option both emitDecoratorMetadata and experimentalDecorators are set to true.

And in systemjs.config libraries are included this way :

 System.config({
    paths: {
      'npm:': 'node_modules/'
    },
    map: {
      app: 'dist',

      // angular bundles
      [ANGULAR BUNDLES HERE]

      // other libraries
      'rxjs':                       'npm:rxjs',
      'sockjs-client': 'lib/sock-js/sockjs.min.js',
      'stompjs': 'node_modules/stompjs/lib/stomp.min.js',
    },
    [etc]

Solution

  • It looks like Client is not an angular 2 service.

    If that is the case, then you cannot inject it through the constructor.

    Take a look at this it uses an earlier version angular 2 but it should give you an idea on how to make it work.