Angular用ngx-mqtt遇NullInjectorError：缺NgxMqttServiceConfig提供者

错误NullInjectorError: No provider for InjectionToken NgxMqttServiceConfig!的核心原因是未正确为ngx-mqtt提供必要的配置项，且在Angular独立组件模式下的配置方式有误。以下是具体问题点和修复步骤：

存在的错误点 #

1. 未定义MQTT配置对象：代码中使用了MQTT_SERVICE_OPTIONS但未实际定义，导致MqttModule.forRoot()无法获取有效配置。
2. 独立组件配置错误：在bootstrapApplication的providers中直接添加MqttModule是错误的，独立组件应用需将配置后的模块放入imports数组。
3. 组件内部重复配置：AppComponent的providers中添加MqttModule属于冗余操作，会导致服务注入冲突。

修复步骤 #

1. 定义MQTT服务配置 #

首先创建你的MQTT连接配置，可直接在main.ts中定义，或单独抽离到配置文件：

import { IMqttServiceOptions } from 'ngx-mqtt';

// 根据你的MQTT broker信息修改
const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
  hostname: 'test.mosquitto.org', // 示例公共MQTT broker
  port: 8083,
  path: '/mqtt',
  protocol: 'ws',
  // 按需添加用户名、密码等配置
};

2. 修正main.ts的根配置 #

在bootstrapApplication中，将配置后的MqttModule放入imports数组，而非providers：

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

const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
  hostname: 'test.mosquitto.org',
  port: 8083,
  path: '/mqtt',
  protocol: 'ws',
};

bootstrapApplication(AppComponent, {
  imports: [
    MqttModule.forRoot(MQTT_SERVICE_OPTIONS) // 在这里导入并初始化MQTT模块
  ],
  providers: [
    provideRouter(routeConfig)
  ]  
}).catch((err) => console.error(err));

3. 修正AppComponent配置 #

移除组件providers中的MqttModule，根配置已全局提供服务，组件只需注入MqttService即可：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { MqttService } from 'ngx-mqtt';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet], // 若无需使用模块内置指令，可移除MqttModule
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'MQTT_Example';

  constructor(private _mqttService: MqttService) {
    // 可选：测试连接，订阅主题
    this._mqttService.observe('test/topic').subscribe(message => {
      console.log('收到MQTT消息:', message.payload.toString());
    });
  }
}

4. 修正测试文件配置 #

在测试模块的imports中添加配置后的MqttModule，移除冗余的providers配置：

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { MqttModule, IMqttServiceOptions } from 'ngx-mqtt';

const MQTT_TEST_OPTIONS: IMqttServiceOptions = {
  hostname: 'test.mosquitto.org',
  port: 8083,
  path: '/mqtt',
  protocol: 'ws',
};

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

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

完成以上修改后，重新启动应用ng serve --open，错误即可解决。

内容的提问来源于stack exchange，提问作者Sohaib Ijaz