Ionic 3 and Angular 4 - Unprepared (in promise): TypeError: Cannot read property 'title' of undefined
I am really new to both Angular and Ionic. I am following a tutorial I found on the internet to create a small learning and testing application. However in the tutorial Angular 2. I am using Angular 4 and Ionic 3. Please, does anyone know why you are getting below errors? I am also following another tutorial and I am getting the same type of error. Someone please help me.
Runtime Error
Uncaught (in promise): TypeError: Cannot read property 'title' of undefined
TypeError: Cannot read property 'title' of undefined at Object.eval [as
updateRenderer] (ng:///AppModule/DetailsPage.ngfactory.js:152:28) at
Object.debugUpdateRenderer [as updateRenderer]
(http://localhost:8100/build/main.js:13122:21) at checkAndUpdateView
(http://localhost:8100/build/main.js:12427:14) at callViewAction
(http://localhost:8100/build/main.js:12785:21) at execComponentViewsAction
(http://localhost:8100/build/main.js:12717:13) at checkAndUpdateView
(http://localhost:8100/build/main.js:12428:5) at callWithDebugContext
(http://localhost:8100/build/main.js:13484:42) at Object.debugCheckAndUpdateView [as checkAndUpdateView]
(http://localhost:8100/build/main.js:13024:12) at ViewRef_.detectChanges
(http://localhost:8100/build/main.js:10496:63) at Tab.NavControllerBase._viewAttachToDOM
(http://localhost:8100/build/main.js:44327:40)
Stack
Error: Uncaught (in promise): TypeError: Cannot read property 'title' of undefined
TypeError: Cannot read property 'title' of undefined
at Object.eval [as updateRenderer] (ng:///AppModule/DetailsPage.ngfactory.js:152:28)
at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/main.js:13122:21)
at checkAndUpdateView (http://localhost:8100/build/main.js:12427:14)
at callViewAction (http://localhost:8100/build/main.js:12785:21)
at execComponentViewsAction (http://localhost:8100/build/main.js:12717:13)
at checkAndUpdateView (http://localhost:8100/build/main.js:12428:5)
at callWithDebugContext (http://localhost:8100/build/main.js:13484:42)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8100/build/main.js:13024:12)
at ViewRef_.detectChanges (http://localhost:8100/build/main.js:10496:63)
at Tab.NavControllerBase._viewAttachToDOM (http://localhost:8100/build/main.js:44327:40)
at c (http://localhost:8100/build/polyfills.js:3:13535)
at Object.reject (http://localhost:8100/build/polyfills.js:3:12891)
at Tab.NavControllerBase._fireError (http://localhost:8100/build/main.js:44060:16)
at Tab.NavControllerBase._failed (http://localhost:8100/build/main.js:44048:14)
at http://localhost:8100/build/main.js:44103:59
at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
at Object.onInvoke (http://localhost:8100/build/main.js:4427:37)
at t.invoke (http://localhost:8100/build/polyfills.js:3:9223)
at r.run (http://localhost:8100/build/polyfills.js:3:4452)
at http://localhost:8100/build/polyfills.js:3:14076
Additional Information
Ionic Framework: 3.4.2
Ionic App Scripts: 1.3.7
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.0
OS Platform: Windows 10
App.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { VinceService } from "./services/vince.service";
import { TabsPage } from '../pages/tabs/tabs';
@Component({
templateUrl: 'app.html',
providers: [VinceService]
})
export class MyApp {
rootPage:any = TabsPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen:
SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}
My ts details page details.ts (with errors)
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
templateUrl: 'details.html'
})
export class DetailsPage {
item:any
constructor(public navCtrl: NavController, public params: NavParams) {
this.item = params.get('item');
}
}
My html details.html page (with errors)
<ion-header>
<ion-navbar color="secondary">
<ion-title>{{item.title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Main Details</h2>
</ion-content>
The page of my Vince.ts app where I call the list of data from the Api (works fine)
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { VinceService } from "../../app/services/vince.service";
import { DetailsPage } from "../details/details";
@Component({
selector: 'vince',
templateUrl: 'vince.html'
})
export class VincePage {
items: any;
constructor(public navCtrl: NavController, private vinceSerivce:VinceService) {
}
ngOnInit(){
this.getPosts('sports', 10);
}
getPosts(category, limit){
this.vinceSerivce.getPosts(category, limit).subscribe(response => {
this.items = response.data.children;
});
}
viewItem(item){
this.navCtrl.push(DetailsPage, {
item:item
});
}
}
Vince.html (works great)
<ion-header>
<ion-navbar color="secondary">
<ion-title>Vince-App</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to My app</h2>
<ion-list>
<ion-item *ngFor="let item of items">
<ion-thumbnail *ngIf="item.data.thumbnail" item-left>
<img src={{item.data.thumbnail}}>
</ion-thumbnail>
<h2>{{item.data.title}}</h2>
<p>
<ion-icon name="thumbs-up">{{item.data.score}}</ion-icon>
<ion-icon name="chatboxes">{{item.data.num_comments}}</ion-icon>
</p>
<button ion-button clear item-right (click)="viewItem (item.dat)">View</button>
</ion-item>
</ion-list>
+3
source to share
2 answers
@Aravind was able to help me solve this problem like this: Vince.html got a typo error "viewItem (item.dat)" So he changed this:
<button ion-button clear item-right (click)="viewItem (item.dat)">View</button>
:
<button ion-button clear item-right (click)="viewItem(item)">View</button>
Further in details.html where he changed this:
<ion-title>{{item.title}}</ion-title>
:
<ion-title>{{item?.data?.title}}</ion-title>
This also works:
<ion-title>{{item.data.title}}</ion-title>
So far so good, this solves problems, hope it helps someone else.
0
source to share