Hello , I am developing an PWA in ionic 2 . Earlier it was working fine … suddenly I started getting error when I try to change anything in the application .
Please find the attached screenshot for reference
Please help if anybody has some idea regarding this
The code is below , I have just added a condition for setting the root page `
export class MyApp {
rootPage:any = HomePage;
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();
let params = new URL(window.location.href);
let id = params.searchParams.get('id') || '';
if(id) {
this.rootPage = OffersPage;
}
});
}
}
please show the line in your code that cause this error. You are calling “call” from something that is undefined, we need to find that right place in your code. I don’t think the error happen in the code you paste here.
Below is the only change which i did in my app :
let params = new URL(window.location.href);
let id = params.searchParams.get('id') || '';
if(id) {
this.rootPage = OffersPage;
}
i understand that, but the error not come from there.
console.log the “id” and if the root is change to “OffersPage” so the problem is in “OffersPage”;
maybe i am wrong maybe not, cost nothing to check it.
Thanks
This is OfferPage code and below is HomePage code
export class OffersPage {
public offersdata: any;
public result:any;
constructor(public http: Http , public navCtrl: NavController){
let params = new URL(window.location.href);
let id = params.searchParams.get('id') || '';
this.result = "Y"
//let token = this.randomise();
//console.log(token);
this.http.get('https://<example.com>/api/offers/load?id='+id).map(res => res.json()).subscribe(data => {
if(data.result == 'success'){
this.offersdata = data.offers;
}else{
this.navCtrl.push(HomePage);
}
});
}
randomise() {
return Math.floor(Math.random() * (100000 - 1000)) + 1000;
}
itemSelected(item2: Object) {
this.navCtrl.push(DetailsPage);
}
}
Below is Home page
export class HomePage {
public pageTitle:any;
public offersdata: any;
constructor(public navCtrl: NavController,public http: Http) {
this.pageTitle = "Health & Glow";
this.http.get('https://<example.com>/api/offers/all').map(res => res.json()).subscribe(data => {
if(data.success){
this.offersdata = data.data;
}else{
//this.navCtrl.push(HomePage);
}
});
}
newList(){
this.navCtrl.push(OffersPage);
}
itemSelected(item: Object) {
//console.log("dshkdahsk "+item);
this.navCtrl.push(DetailsPage,item);
}
}
you need to use separation of concern, create provider that will hold your http call.
retrieve data in your page in ionViewDidLoad, the constructor should not be use for complicate stuff, just for simples initializations.
use console.log in home and offer to track down in which page the error occur, and track down the error till find out where exactly your code break.
You can share a git repo with the project, so i could download and run it and try to figure out where it broke.(suggestion)
Thank
Thanks for your help and suggestion … I have moved all the complex code inside ionViewDidLoad and it worked without any issue after doing the changes also …
I’ve been seeing something like this too: randomly getting “Cannot read property ‘call’ of undefined”.
Any code change didn’t seem like it would trigger this. And, more tellingly, simply restarting ionic serve fixed the problem. That makes me thing it’s not in the application code, but somewhere deeper.
Hi, I have the same issue in Ionic 3 PWA.
The error happened when i do some action(click or navigate) after app was served
It happened once in a while, not everytime.
I have also deployed the app in firebase host.
This error will sometime show when i open the app.
I suspect this is problem of the service worker.
I have try @manoemerson, but its not work, the error remain, below is my service worker
self.toolbox.precache(
[
’./build/vendor.js’,
’./build/main.js’,
’./build/main.css’,
’./build/polyfills.js’,
‘db1.json’,
‘index.html’,
‘manifest.json’
]
);
This probably happen because something is not finish loaded, when i click a button, then error of Cannot read property ‘call’ of undefined
Anyone have solution for this?
Its not just happened in localhost, firebasehost also.
Randomly show up.
I’ve found the same. A simple restart works every time. I’ll keep an eye out for it to see if there’s a pattern, but I would definitely recommend just restarting to see if that does the trick.
Yes restart will help. but if ur app deployed to online hosting like firebase, this error will remain and error happen ramdomly.
I’m getting the same errors as above. A seemingly random error appears when navigation through my PWA app.
Restarting does sometime solve the issue.
Any suggestions?
Regards,
Orion
So nobody has any idea about why I’m getting these random errors. It only happens when a user does an action, for example: click on a checkbox, click on a tab link, click on a item list.
It really seems like the build is corrupted as reloading sometimes fixes it and I can use the app with no issue.
I’m really going crazy trying to debug this…
Cheers,
Orion
Bump. Any idea why this is happening ?
This error on github seems very similar to my issue.
@pnock
@chenlitchian
@kjmp32
@oriongunning
I believe this issue is related to the browser using cached versions your lazy loaded pages. You can avoid this issue during development by disabling your browser’s cache:
See: https://robferguson.org/blog/2018/04/16/0ptimising-the-performance-of-an-ionic-pwa-part-1/
this doesn’t help, caching is always disabled
Hey everyone
I am having the same Issue for days now. Occurs with ionic serve as well as in production running ionic build --prod or nom run ionic:build --prod.
After rebuilding the errors occur in different patterns, but always very randomly upon clicking a button that switches a page.
I assume it has something to do with Lazy Loading, but I have no idea how to get a hold of it… 