[Angular @converse/headless]: Error: You must supply a value for either the bosh_service_url or websocket_url or both

[LMatass]

Hello,

I'm trying to integrate @converse/headless in a Angular app, but I have one error when initializing converse.

I have the following error:

ERROR Error: You must supply a value for either the bosh_service_url or websocket_url or both.
    at _Connection.<anonymous> (index.js:109:19)
    at Generator.next (<anonymous>)
    at chunk-QMAMURKP.js?v=ed115fa0:85:61
    at new ZoneAwarePromise (zone.js:2602:25)
    at __async (chunk-QMAMURKP.js?v=ed115fa0:69:10)
    at _Connection.connect (index.js:103:45)
    at init.js:466:30
    at Generator.next (<anonymous>)
    at chunk-QMAMURKP.js?v=ed115fa0:85:61
    at new ZoneAwarePromise (zone.js:2602:25)

Even if I have a valid bosh_service_url url. I have tried this very same configuration, using a static index.html file and pointing to the https://cdn.conversejs.org/10.1.4/dist/converse.min.js.

Here is how im trying to integrate it into angular (might be wrong as the only example I could find on how to integrate @converse/headless was very old).

Basically I have a service, which on constructor makes the initialization.

// @ts-ignore
import { converse, api } from '@converse/headless/core';

@Injectable({
  providedIn: 'root',
})
export class ConverseService {
  constructor() {
    this.initializeConverse();
  }

  private initializeConverse() {

    converse.initialize({
      bosh_service_url: 'https://xmpp.some.valid.domain/bosh',
      authentication: 'anonymous',
      jid: 'some.valid.domain',
      auto_login: true,
      nickname: "Some anonymous guy [You]",
      auto_join_on_invite: true,
      discover_connection_methods: false,
      allow_non_roster_messaging: true,
      locked_domain: 'some.valid.domain',
    });
  }
}

I have introduced a console.log() inside the initialize() function in node_modules\@converse\headless\shared\api\public.js to check whether the settings were arriving as they supposed, and it looks like it, there are the same settings as I pass in the angular service.

I'm probably missing something but I couldn't figure it out, some help or examples would be appreciate it

[LMatass]

``It seems that I was importing the wrong package.

Replacing:

// @ts-ignore
import { converse, api } from '@converse/headless/core';

for:

// @ts-ignore
import converse from '@converse/headless/index';

Solved the issue.

To access the api object, inside a converse.plugins.add function simply:

    converse.plugins.add('some-plugin', {
      initialize: function () {
        this.foo(this._converse);
      },

      foo(_converse: any) {
         _converse.api.send(...);
      }
     }

Hope this can help anyone!