ngx-mqtt service options error for protocol

Question

In my application i am using angular 7 and the ngx-mqtt package "ngx-mqtt": "^6.8.3". The application works over https so secure connection is used on MQTT server too.

this is my environment.ts

MQTTCONFIG: {
    broker: 'theBroker',
    hostname: 'theHostname',
    **protocol: 'wss'**,
    port: thePort,
    username: 'theUsername',
    password: 'thePassword',
    path: 'thePath',
    topic_query: 'theTopicQuery',
    topic_update_state: 'theTopicUpdateState',
    clientID: 'smartorder'
  }

and this is my app.module.ts (some declarations and imports are omitted):

import { MqttMessage, MqttModule, MqttServiceOptions } from 'ngx-mqtt';
.
.
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MaterialModule,
    LayoutModule,
    MqttModule.forRoot(environment.MQTTCONFIG)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I am getting the following error though:

ERROR in src/app/app.module.ts(62,24): error TS2345: Argument of type '{ broker: string; hostname: string; protocol: string; port: number; username: string; password: string; path: string; topic_query: string; topic_update_state: string; clientID: string; }' is not assignable to parameter of type 'IMqttServiceOptions'.
  Types of property 'protocol' are incompatible.
    Type 'string' is not assignable to type '"wss" | "ws"'.

Line 62 is this: MqttModule.forRoot(environment.MQTTCONFIG)

Property protocol in the MQTT options is set to 'wss': protocol: 'wss'

How can I correct this error?

Answer 1

The ngx-mqtt library you are using takes a enumeration for the protocol. Unfortunetally, you can not set enumeration values in your environment.ts without the typings.

simple workaround: exclude the protocol value from the environment.ts and set it directly in your app.module.ts like so:

// environment.ts
MQTTCONFIG: {
    broker: 'theBroker',
    hostname: 'theHostname',
    port: thePort,
    username: 'theUsername',
    password: 'thePassword',
    path: 'thePath',
    topic_query: 'theTopicQuery',
    topic_update_state: 'theTopicUpdateState',
    clientID: 'smartorder'
}

and

// app.module.ts
export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
    broker: environment.MQTTCONFIG.broker,
    connectOnCreate: true,
    hostname: environment.MQTTCONFIG.hostname,
    port: environment.MQTTCONFIG.port,
    path: environment.MQTTCONFIG.path,
    username: environment.MQTTCONFIG.username,
    password: environment.MQTTCONFIG.password,
    topic_query: environment.MQTTCONFIG.topic_query,
    topic_update_state: environment.MQTTCONFIG.topic_update_state,
    clientID: environment.MQTTCONFIG.clientID,
    protocol: 'wss'
};

If you really want to use the protocol from your environment.ts, then set connectOnCreate: false , load the protocol from inside your app controller after build when you have the missing typings available and then connect to the broker.

Answer 2

This is a typescript error, you have to narrow down the type from string to 'ws' | 'wss' 'ws' | 'wss' . Ideally you don't want to redefine hardcoded enum types so you can piggyback on the existing definition as such:

{
  ...
  protocol: 'wss' as IMqttServiceOptions['protocol'],
  ...
}