Ionic 2 on real device

Ionic Framework ionic-v3
1

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?

2

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

3

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

@Page({
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']
});
this.nav.present(alert);
});

}
itemTapped(item) {
this.nav.push(NewsDetailPage, {
tit:item,
desc:item

});
}
}
//end of news.js

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

@Page({
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’;

@App({
templateUrl: ‘build/app.html’,
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {
constructor(app: IonicApp, platform: Platform) {

// set up our app
this.app = app;
this.platform = platform;
this.initializeApp();

// 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) {
window.StatusBar.styleDefault();
}
});
}

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

4

Could you attach your templates too?

5

//news.html

<ion-navbar *navbar>
  <button menuToggle>
<ion-icon name="menu"></ion-icon>
 </button>
<ion-title>News</ion-title>
</ion-navbar>
<ion-content >
<ion-card *ngFor="#get of newsData" (click)="itemTapped(get)">
<h2>{{get.title}}</h2>
  <ion-card-header>
    <p>{{get.createdAt}}</p>
  </ion-card-header>
</ion-card>
</ion-content>

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

<ion-navbar *navbar>
 <button menuToggle>
 <ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{title.title}}</ion-title>
</ion-navbar>
<ion-content>
<p>{{description.description}}</p>
</ion-content>

//end of newsdetail.html

6

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)