Ionic blank screen from plugin import

Question

I am trying to build a BLE provisioning app using Ionic and the BluetoothLE plugin. But, when I import the plugin, it gives me a blank screen. I've updated to ionic 5 and everything is up to date. I'm trying to build it through the usb debugging mode on android studio. And it works fine until I add the import statement.

I'm importing it the way the docs have it import { BluetoothLE } from '@ionic-native/bluetooth-le/ngx';

The plugin is installed properly and it is recognized as something to import. But for some reason it just bricks the app.

here's the package-lock.json:

"@ionic-native/bluetooth-le": {
      "version": "5.22.0",
      "resolved": "https://registry.npmjs.org/@ionic-native/bluetooth-le/-/bluetooth-le-5.22.0.tgz",
      "integrity": "sha512-evqUuWzhVZZO7znOQvShCYHP8HdElGwnxpWUCYhSGp0YsoacYJUIB7U4LN0Y7azTn3wgMRWT4m7M49Z42ErMXw==",
      "requires": {
        "@types/cordova": "^0.0.34"
      }

also, here's the plugin https://ionicframework.com/docs/native/bluetooth-le

running it on a browser with ionic serve, I get this error in the console

  StaticInjectorError(Platform: core)[HomePage -> BluetoothLE]: 
    NullInjectorError: No provider for BluetoothLE!
NullInjectorError: StaticInjectorError(AppModule)[HomePage -> BluetoothLE]: 
  StaticInjectorError(Platform: core)[HomePage -> BluetoothLE]: 
    NullInjectorError: No provider for BluetoothLE!
    at NullInjector.get (core.js:855)
    at resolveToken (core.js:17514)
    at tryResolveToken (core.js:17440)
    at StaticInjector.get (core.js:17266)
    at resolveToken (core.js:17514)
    at tryResolveToken (core.js:17440)
    at StaticInjector.get (core.js:17266)
    at resolveNgModuleDep (core.js:30393)
    at NgModuleRef_.get (core.js:31578)
    at resolveNgModuleDep (core.js:30393)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)```

What else would you all like to know? This is a problem I know little about, so I'm not sure where to start other than what I know is causing the problem which is the import of the plugin. — mcdowellalex

mcdowellalex mcdowellalex · Accepted Answer · 2020-03-06T14:47:46

It's not documented anywhere that I could find. And maybe that's because I'm new to Ionic and this is common knowledge (I feel like anything like this in software should never be considered common knowledge) but when using a plugin, you need to import the plugin into app.module.ts and add it under providers like so:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { BluetoothLE } from '@ionic-native/bluetooth-le/ngx';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    BluetoothLE
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Ionic blank screen from plugin import

1 Answers