Angular 11 compatibility with ngx-mqtt

[melazhadi]

Hello,

Thank you for this library, I would like to know is there a compatibility problem between angular 11 and your library, I tried to follow your tutorial on readme as it is but I still receive the same exception : ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(TrackingModule)[MqttService -> MqttService -> InjectionToken NgxMqttServiceConfig -> InjectionToken NgxMqttServiceConfig -> InjectionToken NgxMqttServiceConfig]: NullInjectorError: No provider for InjectionToken NgxMqttServiceConfig! NullInjectorError: R3InjectorError(TrackingModule)[MqttService -> MqttService -> InjectionToken NgxMqttServiceConfig -> InjectionToken NgxMqttServiceConfig -> InjectionToken NgxMqttServiceConfig]: NullInjectorError: No provider for InjectionToken NgxMqttServiceConfig! at NullInjector.get (core.js:1005) at R3Injector.get (core.js:11512) at R3Injector.get (core.js:11512) at R3Injector.get (core.js:11512) at injectInjectorOnly (core.js:891) at Module.ɵɵinject (core.js:895) at Function.MqttService_Factory [as ɵfac] (mqtt.service.js:403) at Object.factory (mqtt.service.js:404) at R3Injector.hydrate (core.js:11680) at R3Injector.get (core.js:11501) at resolvePromise (zone-evergreen.js:798) at resolvePromise (zone-evergreen.js:750) at zone-evergreen.js:860 at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:28183) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at drainMicroTaskQueue (zone-evergreen.js:569)

Please explain to me or give me another solution so that I can configure the plugin with my Angular 11 application.

[sclausen]

You're missing a minimal working example. Since this is an unpaid spare time project I think it's just fair that you put some effort into helping me to help you.

[melazhadi]

Yes for the Configure on the Tracking.module.ts : I added this configuration for the connection with the broker: export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = { hostname: 'localhost', port: 9001, path: '/mqtt' };

so on the import part I added this line : MqttModule.forRoot(MQTT_SERVICE_OPTIONS)

at the Tracking.component.ts component level I added this : `import { Component, OnInit } from '@angular/core'; import { IMqttMessage, MqttService } from 'ngx-mqtt'; import { Subscription } from 'rxjs';

declare var ol: any; @Component({ selector: 'vex-tracking', templateUrl: './tracking.component.html', styleUrls: ['./tracking.component.scss'] }) export class TrackingComponent{ private subscription: Subscription; public message: string;

constructor(private _mqttService: MqttService) { this.subscription = this._mqttService.observe('my/topic').subscribe((message: IMqttMessage) => { this.message = message.payload.toString(); }); }

public unsafePublish(topic: string, message: string): void { this._mqttService.unsafePublish(topic, message, {qos: 1, retain: true}); }

public ngOnDestroy() { this.subscription.unsubscribe(); } } `

and that's when I try to navigate to Tracking component I get : ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(TrackingModule)[MqttService -> MqttService -> InjectionToken NgxMqttServiceConfig -> InjectionToken NgxMqttServiceConfig -> InjectionToken NgxMqttServiceConfig]: NullInjectorError: No provider for InjectionToken NgxMqttServiceConfig! NullInjectorError: R3InjectorError(TrackingModule)[MqttService -> MqttService -> InjectionToken NgxMqttServiceConfig -> InjectionToken NgxMqttServiceConfig -> InjectionToken NgxMqttServiceConfig]: NullInjectorError: No provider for InjectionToken NgxMqttServiceConfig! at NullInjector.get (core.js:10823) at R3Injector.get (core.js:10990) at R3Injector.get (core.js:10990) at R3Injector.get (core.js:10990) at injectInjectorOnly (core.js:4907) at ɵɵinject (core.js:4911) at Object.MqttService_Factory [as factory] (ngx-mqtt.js:370) at R3Injector.hydrate (core.js:11158) at R3Injector.get (core.js:10979) at NgModuleRef$1.get (core.js:25046) at resolvePromise (zone-evergreen.js:798) at resolvePromise (zone-evergreen.js:750) at zone-evergreen.js:860 at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:28282) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at drainMicroTaskQueue (zone-evergreen.js:569)

Mosquitto : D:\Ayouris\mosquitto>mosquitto.exe -v -c mosquitto.conf 1610104948: mosquitto version 2.0.4 starting 1610104948: Config loaded from mosquitto.conf. 1610104948: Opening websockets listen socket on port 9001.

Ng --version : `Angular CLI: 11.0.0 Node: 14.13.0 OS: win32 x64

Angular: 11.0.0 ... animations, cdk, cli, common, compiler, compiler-cli, core ... forms, language-service, material, platform-browser

Package Version

@angular-devkit/architect 0.1001.4 @angular-devkit/build-angular 0.1100.0 @angular-devkit/core 10.1.4 @angular-devkit/schematics 11.0.0 @angular/flex-layout 10.0.0-beta.32 @schematics/angular 11.0.0 @schematics/update 0.1100.0 rxjs 6.6.3 typescript 4.0.5

PS C:\Users\Electronic Store\Downloads\themeforest-ToE8XQQd-vex-angular-8-material-design-admin-template\11.0.0\skeleton>ate\11.0.0\skeleton> ng --version

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | ' \ / | | | | |/ _ | '| | | | | | | / _ | | | | (| | || | | (| | | | || |_ | | // __| ||_, |_,||_,|| __|__|| |/

Angular CLI: 11.0.6 Node: 14.13.0 OS: win32 x64

Angular: 11.0.7 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1002.1 @angular-devkit/build-angular 0.1100.6 @angular-devkit/core 10.2.1 @angular-devkit/schematics 11.0.6 @angular/cdk 11.0.3 @angular/cli 11.0.6 @angular/flex-layout 10.0.0-beta.32 @angular/material 11.0.3 @schematics/angular 11.0.6 @schematics/update 0.1100.6 rxjs 6.6.3 typescript 4.0.5`

Package.json : "ngx-mqtt": "^8.0.1",

[sclausen]

I'm really sorry, but that's not a MWE but some code excerpts. In the case of an angular project, a MWE generally consists of a runnable project one can clone, execute npm i and start the angular dev server.