STOMP library for JavaScript/TypeScript.

1 minute read

This guide shows how to migrate an Angular app from @stomp/ng2-stompjs to @stomp/rx-stomp.

Tested with Angular 7 and 13; the steps apply to Angular 7+.

See also Using rx-stomp with Angular.

Overview

  • Update TypeScript target to ES2015+ (ES6) to support rx-stomp classes.
  • Replace ng2-stompjs dependencies and symbols with rx-stomp equivalents.
  • Create a simple RxStompService and a factory to configure and activate it.
  • Update Angular DI to provide the new service.

Prerequisites

  • Angular CLI project with TypeScript configured.
  • WebSocket/STOMP endpoint available.

1) TypeScript compile target

rx-stomp uses ES6 classes. Ensure tsconfig.json has:

  • target: at least es6 (or es2015).

Example: "target": "es2017".

2) Replace dependency

Uninstall ng2-stompjs and install rx-stomp:

npm uninstall @stomp/ng2-stompjs npm i @stomp/rx-stomp

3) Update imports and types

  • Replace InjectableRxStompConfig (ng2-stompjs) with RxStompConfig (rx-stomp).
  • You will provide your configuration object (e.g., myRxStompConfig) to RxStomp.configure.

4) Create RxStompService

Create src/app/rx-stomp.service.ts:

import { Injectable } from '@angular/core'; import { RxStomp } from '@stomp/rx-stomp'; @Injectable({ providedIn: 'root', }) export class RxStompService extends RxStomp { constructor() { super(); } }

5) Create a factory for the service

Create src/app/rx-stomp-service-factory.ts:

import { RxStompService } from './rx-stomp.service'; import { myRxStompConfig } from './my-rx-stomp.config'; export function rxStompServiceFactory() { const rxStomp = new RxStompService(); rxStomp.configure(myRxStompConfig); rxStomp.activate(); return rxStomp; }

If you use a custom setup (e.g., dynamic URLs, auth headers), adjust the factory accordingly before activate().

6) Update Angular DI

Remove the InjectableRxStompConfig provider from ng2-stompjs. Provide RxStompService via the factory:

providers: [ { provide: RxStompService, useFactory: rxStompServiceFactory, }, ];

Update imports where needed:

import { RxStompService } from './rx-stomp.service'; import { rxStompServiceFactory } from './rx-stomp-service-factory';

7) Adjust local imports

Replace any @stomp/ng2-stompjs service imports with the local RxStompService.

Notes

  • Keep your configuration shape compatible with RxStompConfig.
  • Ensure rxStomp.activate() is called once (the factory pattern above guarantees that).

Updated: