Error: No Provider for MediaCapture in Ionic2

Question

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

Answer 1

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

Answer 2

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