Blank App

I have no errors in my app. Why does it show a blank screen?

There are several different reasons this can happen. If you are unable to find a solution on the Ionic forums, make sure:

  • Polyfills are not included for older browser/versions of android
    For projects with @angular/[email protected] or above, polyfills will automatically be included. For project created before that, polyfills need to be manually enabled.

In src/polyfills.ts, you must enabled all ES6 polyfills for Android 4.4 support.

Alternatively, a project could be updated to use the latest release of the @angular/cli package & @angular-devkit packages and include the es5BrowserSupport option in the angular.json's build options object:

  1.         "input": "src/global.scss"
  2.       }
  3.     ],
  4. -   "scripts": []
  5. +   "scripts": [],
  6. +   "es5BrowserSupport": true
  7.   },
  8.   "configurations": {
  9.     "production": {


This will automatically include the polyfills for older browsers that need them.

Directive Not Working

Why is my custom component/directive not working?

There are a few things you can check. Make sure:

  • Your selector doesn't have any misspellings.
  • You're using the selector correctly as an attribute, element or class.
  • Your selector has the proper syntax:
    • [attr] if it's an attribute selector
    • element if it's an element selector
    • .class if it's a class selector
      Here's an example using an attribute selector: 
  1. @Directive({
  2.   selector: '[my-dir]' // <-- [my-dir] because it is an attribute
  3. })                     // Could be my-dir, [my-dir], .my-dir
  4. class MyDir {
  5.   constructor() {
  6.     console.log('I'm alive!');
  7.   }
  8. }
  10. @Component({
  11.   // We add my-dir as an attribute to match the directive's selector
  12.   template: `<div my-dir>Hello World</div>`,
  14.   // Alternatively, if you were attaching the directive to an element it would be:
  15.   // template: `<my-dir>Hello World</my-dir>`
  16.   // and if you were attaching by class the template would be:
  17.   // template: `<div class="my-dir">Hello World</div>`
  19.   directives: [MyDir] // <-- Don't forget me! (only if your ionic-angular version is below RC0)
  20. })
  21. class MyPage { }

Click Delays

Why is there a delay on my click event?

In general, we recommend only adding (click) events to elements that arenormally clickable. This includes <button> and <a> elements. This improvesaccessibility as a screen reader will be able to tell that the element isclickable.

However, you may need to add a (click) event to an element that is notnormally clickable. When you do this you may experience a 300ms delay from thetime you click the element to the event firing. To remove this delay, you canadd the tappable attribute to your element.

  1.  <div tappable (click)="doClick()">I am clickable!</div>

Cordova plugins not working in the browser

At some point in your development you may, try to call Cordova plugin, but get awarning:

  1. [Warning] Native: tried calling StatusBar.styleDefault, but Cordova is not
  2. available. Make sure to include cordova.js or run in a device/simulator
  3. (app.bundle.js, line 83388)


This happens when you try to call a native plugin, but Cordova isn't available.Thankfully, Ionic Native will print out a nice warning, instead of an error.

In other cases where the plugin is not being used through Ionic Native, pluginscan print a much more obscure warning.

  1. EXCEPTION: Error: Uncaught (in promise): TypeError: undefined is not an object
  2. (evaluating 'navigator.camera.getPicture')


If this happens, test the plugin on a real device or simulator.

Multiple instances of a provider

If you inject a provider in every component because you want it available to allof them you will end up with multiple instances of the provider. You shouldinject the provider once in the parent component if you want it to be availableto the child components.

  1. let id = 0;
  2. export class MyService {
  3.   id: number;
  5.   constructor() {
  6.     this.id = id++;
  7.   }
  8. }
  10. @Component({
  11.   selector: 'my-component',
  12.   template: 'Hello World',
  13.   providers: [MyService] // <-- Creates a new instance of MyService :(
  14. })                       // Unnecessary because MyService is in App's providers
  15. class MyComp {
  16.   // id is 1, s is a different MyService instance than MyApp
  17.   constructor(s: MyService) {
  18.     console.log('MyService id is: ' + s.id);
  19.   }
  20. }
  22. @Component({
  23.   template: '<my-component></my-component>',
  24.   providers: [MyService], // MyService only needs to be here
  25.   directives: [MyComp]
  26. })
  27. class MyApp {
  28.   // id is 0
  29.   constructor(s: MyService) {
  30.     console.log('MyService id is: ' + s.id);
  31.   }
  32. }