CODEWITHSUNDEEP
angulartypescript
Multitut
Multitut

Reputation: 2169

Error: No Provider for MediaCapture in Ionic2

I am trying to use the most simple form of the MediaCapture for Ionic 2. I created a brand new project and added it as mentioned here.

But when I try to use it:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from '@ionic-native/media-capture';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(private mediaCapture: MediaCapture) {

  }

}

This error comes in (at the end of it is my environment info):

Runtime Error
Uncaught (in promise): Error: No provider for MediaCapture! Error at g (http://127.0.0.1:8100/build/polyfills.js:3:7133) at injectionError (http://127.0.0.1:8100/build/main.js:1511:86) at noProviderError (http://127.0.0.1:8100/build/main.js:1549:12) at ReflectiveInjector_._throwOrNull (http://127.0.0.1:8100/build/main.js:3051:19) at ReflectiveInjector_._getByKeyDefault (http://127.0.0.1:8100/build/main.js:3090:25) at ReflectiveInjector_._getByKey (http://127.0.0.1:8100/build/main.js:3022:25) at ReflectiveInjector_.get (http://127.0.0.1:8100/build/main.js:2891:21) at AppModuleInjector.NgModuleInjector.get (http://127.0.0.1:8100/build/main.js:3856:52) at resolveDep (http://127.0.0.1:8100/build/main.js:11260:45) at createClass (http://127.0.0.1:8100/build/main.js:11117:35) at createDirectiveInstance (http://127.0.0.1:8100/build/main.js:10954:37) at createViewNodes (http://127.0.0.1:8100/build/main.js:12303:49) at createRootView (http://127.0.0.1:8100/build/main.js:12208:5) at callWithDebugContext (http://127.0.0.1:8100/build/main.js:13339:42) at Object.debugCreateRootView [as createRootView] (http://127.0.0.1:8100/build/main.js:12800:12)
Stack
Error: Uncaught (in promise): Error: No provider for MediaCapture!
Error
    at g (http://127.0.0.1:8100/build/polyfills.js:3:7133)
    at injectionError (http://127.0.0.1:8100/build/main.js:1511:86)
    at noProviderError (http://127.0.0.1:8100/build/main.js:1549:12)
    at ReflectiveInjector_._throwOrNull (http://127.0.0.1:8100/build/main.js:3051:19)
    at ReflectiveInjector_._getByKeyDefault (http://127.0.0.1:8100/build/main.js:3090:25)
    at ReflectiveInjector_._getByKey (http://127.0.0.1:8100/build/main.js:3022:25)
    at ReflectiveInjector_.get (http://127.0.0.1:8100/build/main.js:2891:21)
    at AppModuleInjector.NgModuleInjector.get (http://127.0.0.1:8100/build/main.js:3856:52)
    at resolveDep (http://127.0.0.1:8100/build/main.js:11260:45)
    at createClass (http://127.0.0.1:8100/build/main.js:11117:35)
    at createDirectiveInstance (http://127.0.0.1:8100/build/main.js:10954:37)
    at createViewNodes (http://127.0.0.1:8100/build/main.js:12303:49)
    at createRootView (http://127.0.0.1:8100/build/main.js:12208:5)
    at callWithDebugContext (http://127.0.0.1:8100/build/main.js:13339:42)
    at Object.debugCreateRootView [as createRootView] (http://127.0.0.1:8100/build/main.js:12800:12)
    at g (http://127.0.0.1:8100/build/polyfills.js:3:7133)
    at l (http://127.0.0.1:8100/build/polyfills.js:3:6251)
    at http://127.0.0.1:8100/build/polyfills.js:3:6805
    at t.invokeTask (http://127.0.0.1:8100/build/polyfills.js:3:15213)
    at Object.onInvokeTask (http://127.0.0.1:8100/build/main.js:4415:37)
    at t.invokeTask (http://127.0.0.1:8100/build/polyfills.js:3:15134)
    at n.runTask (http://127.0.0.1:8100/build/polyfills.js:3:10390)
    at a (http://127.0.0.1:8100/build/polyfills.js:3:5313)
Ionic Framework: 3.0.1
Ionic App Scripts: 1.3.0
Angular Core: 4.0.0
Angular Compiler CLI: 4.0.0
Node: 6.10.1
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) Ap

Upvotes: 2

Views: 1302

Answers (2)

karan sharma
karan sharma

Reputation: 614

You need to add MediaCapture class in poviders of your app.module.ts file found in app folder.

import { MediaCapture } from '@ionic-native/media-capture';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
   //
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, MediaCapture ]
})

export class AppModule {}

Upvotes: 1

Bala Abhinav
Bala Abhinav

Reputation: 1348

Recently, there was a change where you would have to 'provide' all the ionic-native plugins that you are using across the app to the app.module. Hence, You should add MediaCapture to the providers array of the app.module.ts file. Then, It will start working

Upvotes: 2

Related Questions