typescript - Angular: NullInjectorError: Ingen leverantör för InjectionToken NgxMqttServiceConfig

Jag är ny på Angular och har ett problem utan lösning.

I princip bygger jag en enkel MQTT-applikation med den senaste versionen av Angular och ngx-mqtt "biblioteket". Men när jag startar applikationen får jag följande fel:

R3InjectorError(Standalone[_AppComponent])[_MqttService -> _MqttService -> InjectionToken NgxMqttServiceConfig -> InjectionToken NgxMqttServiceConfig]: NullInjectorError: Ingen leverantör för InjectionToken NgxMqttServiceConfig!

Vet du vad jag gör fel här?

Ytterligare 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!

  }
}

Jag försökte också:

MqttModule.forRoot(MQTT_SERVICE_OPTIONS)

Men det hjälpte inte.

Hur man reproducerar?

  1. Skapa Angular-applikationen --> ng new mqtt_example
  2. Installera ngx-mqtt --> npm install ngx-mqtt --save
  3. Skriv följande i filen app.component.ts

konstruktör(private _mqttService: MqttService) { }

  1. Kör applikationen --> ng serve --open

Svar #1

Du bör registrera alla leverantörer som är relaterade till MqttModule när du startar applikationen:

main.ts

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

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

Svar #2

Kan du försöka använda importProvidersFrom för bootstrap-leverantörerna, det finns också inget behov av att lägga till den separata providers-arrayen för app-komponenten.

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));