Angular: NullInjectorError: No provider for InjectionToken NgxMqttServiceConfig

Question

I am new to Angular and facing an issue with no solution.

Basically I build an simple MQTT application using the latest version of Angular and the ngx-mqtt "library". But when starting the application I get the following error:

R3InjectorError(Standalone[_AppComponent])[_MqttService -> _MqttService -> InjectionToken NgxMqttServiceConfig -> InjectionToken NgxMqttServiceConfig]: NullInjectorError: No provider for InjectionToken NgxMqttServiceConfig!

Do you know what I am doing wrong here?

Additional Information:

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import routeConfig from './route';
import { MqttModule } from 'ngx-mqtt';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routeConfig) ,
    MqttModule
    
  ]  
}).catch((err) => console.error(err));

app.component.spec.ts

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        AppComponent,
        BrowserModule,
        MqttModule.forRoot(MQTT_SERVICE_OPTIONS)
      ],
      providers: [
        MqttModule
      ]
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

app.component.ts

import { Component, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import {
  IMqttMessage,
  IMqttServiceOptions,
  MqttService,
  IPublishOptions,
  MqttModule,
  MQTT_SERVICE_OPTIONS,
  MqttClientService
} from 'ngx-mqtt';
import { IClientSubscribeOptions } from 'mqtt-browser';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, MaterialModule, MqttModule],
  providers:[MqttModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})


export class AppComponent {
  title = 'MQTT_Example';

  constructor(private _mqttService: MqttService) { //this leads to the error!

  }
}

I also tried:

MqttModule.forRoot(MQTT_SERVICE_OPTIONS)

But It did'nt helped.

How to reproduce?

1. Create the angular application --> ng new mqtt_example
2. Install ngx-mqtt --> npm install ngx-mqtt --save
3. Write the following in the file app.component.ts

constructor(private _mqttService: MqttService) { }

4. Run the application --> ng serve --open

Answer 1

You should register all related to MqttModule providers while bootstrapping application:

main.ts

import { importProvidersFrom } from '@angular/core';
...

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routeConfig) ,
    importProvidersFrom(MqttModule.forRoot(MQTT_SERVICE_OPTIONS)),
    ...

Answer 2

Could you try using importProvidersFrom to the bootstrap providers, also there is no need to add the separate providers array for app component.

import { CommonModule } from '@angular/common';
import { Component, importProvidersFrom } from '@angular/core';
import { RouterOutlet, provideRouter } from '@angular/router';
import { bootstrapApplication } from '@angular/platform-browser';
import { MqttModule, MqttService } from 'ngx-mqtt';
import 'zone.js';

const routeConfig: any = [];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, MqttModule],
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
})
export class App {
  name = 'Angular';

  constructor(private _mqttService: MqttService) {}
}

bootstrapApplication(App, {
  providers: [provideRouter(routeConfig), importProvidersFrom(MqttModule)],
}).catch((err) => console.error(err));