Ionic 2 UI/Alert from a Angular 2 Service

Note: Updated from Beta 8 to Release Candidate.

When you create an Ionic 2 page/component your constructor can inject the NavController like this:

constructor(private nav:NavController) {}

However, if you have tried this from a service then you’ve probably found this error:

No provider for NavController! (YourService -> NavController)

The particular use case i was tackling is to provide a simple Alert when there is an error in my service that was using Angular 2’s http.

To fix the problem, first import IonicApp:

import {App, Alert} from 'ionic-angular';

In our constructor we inject our app:

constructor(private app: App) {}

Now to get the NavController and present some UI we can:

let alert = Alert.create({title: 'Error', message: message, buttons: ['OK']});
var nav = this.app.getActiveNav();
nav.present(alert);

Hope this helps someone out struggling with the same problem.