Ionic-framework: No provider for Keyboard!

Created on 27 Mar 2017 · 10Comments · Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x
[x ] 2.x

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Cannot inject Keyboard

Expected behavior:
Keyboard should work

Steps to reproduce:

ionic start testKeyboard --v2
cd testKeyboard
ionic platform add ios
ionic plugin add ionic-plugin-keyboard
npm install --save @ionic-native/keyboard

Related code:
in app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';
import { Keyboard } from '@ionic-native/keyboard';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private keyboard: Keyboard) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      keyboard.show();
    });
  }
}

Other information:

Runtime Error
Error in :0:0 caused by: No provider for Keyboard!

Error: DI Error
    at v (http://localhost:8101/build/polyfills.js:3:4864)
    at NoProviderError.BaseError [as constructor] (http://localhost:8101/build/main.js:35092:27)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:8101/build/main.js:75097:16)
    at new NoProviderError (http://localhost:8101/build/main.js:75159:16)
    at ReflectiveInjector_._throwOrNull (http://localhost:8101/build/main.js:110633:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8101/build/main.js:110672:25)
    at ReflectiveInjector_._getByKey (http://localhost:8101/build/main.js:110604:25)
    at ReflectiveInjector_.get (http://localhost:8101/build/main.js:110473:21)
    at AppModuleInjector.NgModuleInjector.get (http://localhost:8101/build/main.js:76033:52)
    at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:8101/build/main.js:111408:45)
    at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:8101/build/main.js:111836:49)
    at ElementInjector.get (http://localhost:8101/build/main.js:110912:27)
    at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:8101/build/main.js:111408:45)
    at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:8101/build/main.js:111836:49)
    at CompiledTemplate.proxyViewClass.View_MyApp_Host0.createInternal (/AppModule/MyApp/host.ngfactory.js:15:204)

Ionic Framework: 2.3.0
Ionic App Scripts: 1.1.4
Angular Core: 2.4.8
Angular Compiler CLI: 2.4.8
Node: 7.3.0
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Source

anphu7492

Most helpful comment

Have you tried to add it as provider in the component decorator, it should be like this:

@Component({
  templateUrl: 'app.html',
  providers: [Keyboard]
})

oudzy on 27 Mar 2017

👍26

All 10 comments

Have you tried to add it as provider in the component decorator, it should be like this:

@Component({
  templateUrl: 'app.html',
  providers: [Keyboard]
})

oudzy on 27 Mar 2017

👍26

@oudzy Adding providers to component did the trick. Thank you. I think it should be mentioned in the doc.

anphu7492 on 27 Mar 2017

👍2

I'm having this problem in the tests using angular's test bed. Although I added Keyboard to the providers array in the component and and used overrideComponent I still get no provider for keyboard

franciscotln on 30 May 2017

@franciscotln I'm getting as well. This never happened when it was still on ionic-angular. But, when they refactored all the ionic native things out of ionic-angular, eg import { Keyboard } from '@ionic-native/keyboard'; it doesn't seem to work now.

kamok on 7 Jun 2017

Is adding the provider to the component a good practice ?
It works, anyway, I'm just curious ;)

DaCookie on 4 Jul 2017

👍1

@DaCookie How do you use the Keyboard methods if you don't declare it on the component?

kamok on 4 Jul 2017

I didn't know if there was another way to do it. In fact, it looked like a trick to me, more than a solution. But my bad : this is the solution :p

DaCookie on 4 Jul 2017

@DaCookie If this looks like a trick to you, you have some serious knowledge gap in regards to how Angular 2 works. I would suggest reading https://angular.io/api/core/Component and https://stackoverflow.com/questions/37867503/what-are-providers-in-angular2

kamok on 4 Jul 2017

👎1

@DaCookie, I'd say good practice is to add plugins/providers to your app module instead of the component, like so: Add Plugins to Your App's Module (follow instructions here: Keyboard).

bnfrnz on 21 Dec 2017

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.