Framework v4 BETA

Runtime Errors

Blank App

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

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

  • Root @Component has a template or templateUrl.
  • Root @Component template has an <ion-nav> with a root property:

    markup preview
    html
    <ion-nav [root]="rootPage"></ion-nav>

Directive Not Working

Why is my custom component/directive not working?

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

  • You include it in the directives array of the @Component you want to use it in (only if your ionic-angular version is below RC0).
  • 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:

typescript
@Directive({
  selector: '[my-dir]' // <-- [my-dir] because it is an attribute
})                     // Could be my-dir, [my-dir], .my-dir
class MyDir {
  constructor() {
    console.log('I'm alive!');
  }
}

@Component({
  // We add my-dir as an attribute to match the directive's selector
  template: `<div my-dir>Hello World</div>`,

  // Alternatively, if you were attaching the directive to an element it would be:
  // template: `<my-dir>Hello World</my-dir>`
  // and if you were attaching by class the template would be:
  // template: `<div class="my-dir">Hello World</div>`

  directives: [MyDir] // <-- Don't forget me! (only if your ionic-angular version is below RC0)
})
class MyPage { }

Click Delays

Why is there a delay on my click event?

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

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

markup preview
html
 <div tappable (click)="doClick()">I am clickable!</div>
I am clickable!

Cordova plugins not working in the browser

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

[Warning] Native: tried calling StatusBar.styleDefault, but Cordova is not
available. Make sure to include cordova.js or run in a device/simulator
(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, plugins can print a much more obscure warning.

EXCEPTION: Error: Uncaught (in promise): TypeError: undefined is not an object
(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 all of them you will end up with multiple instances of the provider. You should inject the provider once in the parent component if you want it to be available to the child components.

typescript
let id = 0;
export class MyService {
  id: number;

  constructor() {
    this.id = id++;
  }
}

@Component({
  selector: 'my-component',
  template: 'Hello World',
  providers: [MyService] // <-- Creates a new instance of MyService :(
})                       // Unnecessary because MyService is in App's providers
class MyComp {
  // id is 1, s is a different MyService instance than MyApp
  constructor(s: MyService) {
    console.log('MyService id is: ' + s.id);
  }
}

@Component({
  template: '<my-component></my-component>',
  providers: [MyService], // MyService only needs to be here
  directives: [MyComp]
})
class MyApp {
  // id is 0
  constructor(s: MyService) {
    console.log('MyService id is: ' + s.id);
  }
}

Plunker: http://plnkr.co/edit/QzgR5H0r8FijHeVtv2dd