Ionic 2 on real device


I have been trying to create an app using ionic v2. It has list view and detail view page. In browser, whenever I click list item it navigate smoothly to detailview page. But whenever I run my app on device using ionicview app, the detailview page doesn’t work at all?. Wonder what am I missing?


Could you post your code? It’s kind of hard to tell without seeing what you’re actually doing. Thanks!


//start news.js
import {Page, NavController, NavParams, Alert} from ‘ionic/ionic’;
import {Http} from ‘angular2/http’;
import {NewsDetailPage} from ‘…/NewsDetailPage/newsdetail’;

templateUrl: ‘build/pages/NewsPage/news.html’
export class NewsPage {
constructor(http:Http, nav:NavController, navParams: NavParams) {
this.nav = nav;
this.http = http;
this.newsData = null;

  this.http.get('build/pages/NewsPage/data.json').subscribe(data => {
    this.newsData= data.json();
err => {
			let alert = Alert.create({
 				 title: 'Network Error!',
  				 subTitle: 'Cannot fetch the data from server!',
  				 buttons: ['Ok']

itemTapped(item) {
this.nav.push(NewsDetailPage, {

//end of news.js

//start of newsdetail.js
import {Page,NavParams} from ‘ionic/ionic’;

templateUrl: ‘build/pages/NewsDetailPage/newsdetail.html’
export class NewsDetailPage {
constructor(navParams: NavParams) {
this.nav = nav;
this.title = navParams.get(‘tit’);
this.description = navParams.get(‘desc’);
//end newdetail.js

//start app.js
import {App, IonicApp, Platform} from ‘ionic/ionic’;
/import {Http} from ‘angular2/http’;/
import {NewsPage} from ‘./pages/NewsPage/news’;
import {MessagePage} from ‘./pages/MessagePage/message’;
import {MembersPage} from ‘./pages/MembersPage/members’;
import {GalleryPage} from ‘./pages/GalleryPage/gallery’;
import {EventsPage} from ‘./pages/EventsPage/events’;
import {YoutubePage} from ‘./pages/YoutubePage/youtube’;
import {ContactPage} from ‘./pages/ContactPage/contact’;

templateUrl: ‘build/app.html’,
config: {} //
class MyApp {
constructor(app: IonicApp, platform: Platform) {

// set up our app = app;
this.platform = platform;

// set our app's pages
this.pages = [
  { title: 'News', component: NewsPage},
  { title: 'Message', component: MessagePage },
  { title: 'Members', component: MembersPage },
  { title: 'Gallery', component: GalleryPage },
  { title: 'Events', component:  EventsPage },
  { title: 'Youtube', component: YoutubePage },
  { title: 'Contact', component: ContactPage }

// make HelloIonicPage the root (or first) page
this.rootPage = NewsPage;


initializeApp() {
this.platform.ready().then(() => {
// The platform is now ready. Note: if this callback fails to fire, follow
// the Troubleshooting guide for a number of possible solutions:
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
// First, let’s hide the keyboard accessory bar (only works natively) since
// that’s a better default:
// For example, we might change the StatusBar color. This one below is
// good for light backgrounds and dark text;
if (window.StatusBar) {

openPage(page) {
// close the menu when clicking a link from the menu‘leftMenu’).close();
// navigate to the new page if it is not the current page
let nav =‘nav’);


Could you attach your templates too?



<ion-navbar *navbar>
  <button menuToggle>
<ion-icon name="menu"></ion-icon>
<ion-content >
<ion-card *ngFor="#get of newsData" (click)="itemTapped(get)">

//end news.html
//start newsdetail.html

<ion-navbar *navbar>
 <button menuToggle>
 <ion-icon name="menu"></ion-icon>

//end of newsdetail.html


I’m not sure, that looks like it should work. Check if you’re getting any errors when you run it on the device (try running ionic run android -lsc to see the console logs)