CODEWITHSUNDEEP
angularionic-frameworkbluetooth-lowenergycapacitor
yankeedoodle
yankeedoodle

Reputation: 473

Ionic blank screen from plugin import

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

Upvotes: 1

Views: 281

Answers (1)

yankeedoodle
yankeedoodle

Reputation: 473

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 {}

Upvotes: 2

Related Questions