Image Picker - Invalid provider error

Ionic Native
1

Hey,

I try using Image Picker, but I get errors.

app.module.ts

import {ImagePicker} from '@ionic-native/image-picker';

  providers: [
    ImagePicker,
    ...
  ],

x.component.ts

import {ImagePicker} from '@ionic-native/image-picker/ngx';

  constructor(private imagePicker: ImagePicker) {
  }

  public pickImage() {
    this.imagePicker.getPictures({}).then(results => {
      for (const image of results.length) {
        console.log('Image URI: ' + image);
      }
    }, (err) => { });
  }

The error

Error: Invalid provider for the NgModule 'AppModule' - only instances of Provider and Type are allowed, got: [..., ..., ?[object Object]?, ...]
    at throwInvalidProviderError (core.js:8138)
    at providerToFactory (core.js:17389)
    at providerToRecord (core.js:17345)
    at R3Injector.processProvider (core.js:17161)
    at core.js:17140
    at core.js:1400
    at Array.forEach (<anonymous>)
    at deepForEach (core.js:1400)
    at R3Injector.processInjectorType (core.js:17136)
    at core.js:16877

I have tried removing the provider, but then that is the error:

core.js:6241 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[ImagePicker -> ImagePicker -> ImagePicker]: 
  NullInjectorError: No provider for ImagePicker!
NullInjectorError: R3InjectorError(AppModule)[ImagePicker -> ImagePicker -> ImagePicker]: 
  NullInjectorError: No provider for ImagePicker!
    at NullInjector.get (core.js:1085)
    at R3Injector.get (core.js:16968)
    at R3Injector.get (core.js:16968)
    at R3Injector.get (core.js:16968)
    at NgModuleRef$1.get (core.js:36342)
    at Object.get (core.js:33985)
    at getOrCreateInjectable (core.js:5848)
    at ɵɵdirectiveInject (core.js:21116)
    at NodeInjectorFactory.ExerciseAddComponent_Factory [as factory] (ɵfac.js? [sm]:1)
    at getNodeInjectable (core.js:5993)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41645)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)
defaultErrorLogger @ core.js:6241
handleError @ core.js:6294
next @ core.js:42627
schedulerFn @ core.js:37132
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:37092
(anonymous) @ core.js:41707
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41501
onHandleError @ core.js:41704
handleError @ zone-evergreen.js:368
runGuarded @ zone-evergreen.js:136
api.microtaskDrainDone @ zone-evergreen.js:670
drainMicroTaskQueue @ zone-evergreen.js:576
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647

My system:

Ionic:

   Ionic CLI                     : 6.10.1 (C:\Users\Steinente\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.3.0
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.0

Capacitor:

   Capacitor CLI   : 2.3.0
   @capacitor/core : 2.3.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (D:\Programme\Android\sdk)
   NodeJS            : v12.16.3 (D:\Programme\nodejs\node.exe)
   npm               : 6.14.4
   OS                : Windows 10

Anyone an idea?

2

I found a solution, my bad.

On the app.module.ts the import is incorrect.

import {ImagePicker} from '@ionic-native/image-picker';

to

import {ImagePicker} from '@ionic-native/image-picker/ngx';
2 Likes