Error: StaticInjectorError(AppModule)[HomePage -> BluetoothSerial]

Question

I'm using in my Ionic 4 app the plugin '@ionic-native/bluetooth-serial/ngx' for communication with a thermal printer. If I compile the source for an android device with android 7.1.1, it shows this error:

E/Capacitor/Plugin/Console: ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[HomePage -> BluetoothSerial]: StaticInjectorError(Platform: core)[HomePage -> BluetoothSerial]: NullInjectorError: No provider for BluetoothSerial! Error: StaticInjectorError(AppModule)[HomePage -> BluetoothSerial]: StaticInjectorError(Platform: core)[HomePage -> BluetoothSerial]: NullInjectorError: No provider for BluetoothSerial! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http: //localhost/vendor.js:42939:19) at resolveToken (http: //localhost/vendor.js:43184:24) at tryResolveToken (http: //localhost/vendor.js:43128:16) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http: //localhost/vendor.js:43025:20) at resolveToken (http: //localhost/vendor.js:43184:24) at tryResolveToken (http: //localhost/vendor.js:43128:16) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http: //localhost/vendor.js:43025:20) at resolveNgModuleDep (http: //localhost/vendor.js:55261:29) at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (http: //localhost/vendor.js:55950:16) at resolveNgModuleDep (http: //localhost/vendor.js:55261:29)

I have only imported it and added the parameter in the constructor.

home.ts code:

import { Component } from '@angular/core';
import { BluetoothSerial } from '@ionic-native/bluetooth-serial/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  infoText:string = '';

  constructor(private bluetoothSerial: BluetoothSerial) {}

  listAllItems()
  {
    this.infoText = 'Hier werden alle Geräte aufgelistet!!!';
  }

  isConnected()
  {
    this.infoText = 'Hier wird angezeigt ob es verbunden ist!!!';
  }
}

Does anyone know the cause for the error? Thanks for help.

Did you run: ionic cordova plugin add cordova-plugin-bluetooth-serial and npm install @ionic-native/bluetooth-serial? — youri
Look at the code, only in home.ts. Ok and the normal place: package.json — achmed24
@youri yes. I habe do the same as here: ionicframework.com/docs/native/bluetooth-serial and like this medium.com/@maneeshaindrachapa/… — achmed24

rtpHarry rtpHarry · Accepted Answer · 2019-07-06T09:31:29

In addition to the instructions on the native plugins page there are also some general instructions that you have to follow every time you add a plugin to your project.

They are listed here:

Ionic Native Community Edition - Ionic Documentation

What it means is that you need to edit your app.module.ts to import the module into the project. It can then be used by the rest of the app.

// app.module.ts
import { BluetoothSerial } from '@ionic-native/bluetooth-serial/ngx';

...

@NgModule({
  ...

  providers: [
    ...
    BluetoothSerial
    ...
  ]
  ...
})
export class AppModule { }

Error: StaticInjectorError(AppModule)[HomePage -> BluetoothSerial]

1 Answers