App is crashing loading a local json file after being minimized


I’m creating a news feed rss app and everything is just fine if I run the app with serve -c, etc.

My problem is when I deploy the app to Ionic DashBoard Pro. The first time, is working fine with Ionic View, all lazy loaded pages are working fine, etc, but if I minimize the app and back to if after some time, the app crashes…I think it’s something related to the json file. But…why is working the first time and then it crashes when the app is minimized?

Any help here would be very much appreciated.

What is your ionic info output?
How and why are you loading a local json file?
Did you look at the crash logs on your device?
What platform and device are you testing?

95% of “why does it work some times and not other times?” problems are race conditions. Carefully audit (or, better yet, have somebody else do so, because it is hard to read one’s own code critically enough) every use of asynchronous operations to try to prove that none of them can ever attempt to use data that may not be in a reliable state.

Hi, thanks for your answer. This is my ionic info. (I am using an iPhone X with iOS 11.2.6)

cli packages:

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : not installed

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2


Android SDK Tools : 26.1.1
Node              : v8.9.4
npm               : 5.7.1
OS                : Windows 7

Environment Variables:

ANDROID_HOME : C:\Users\cdurobaenas\AppData\Local\Android\Sdk


backend : pro

I also made 2 videos, one with the working app (1st time) and other one, when I minimize and then open Ionic View again. Just for the record…the app is working perfectly fine, and always on Ionic DevApp, is only failing with Ionic View.

Working App

Non-working after being minimimzed:

About the code, basically I am using a provider with a local json path and file:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';


export class RemoteServiceProvider {

  getApiUrl: string = 'assets/json/hhtjson.json';

  constructor(public http: Http) {
    console.log('HHT RemoteServiceProvider loaded!');

  getPosts() {

    return this.http.get(this.getApiUrl)
           .map((res: Response) => res.json())


and then I get the results on the newsPage:

ngOnInit() {

    console.log('-Data parsed and initialized-'); = 0;


  getPosts(refresher) {

    this.remoteService.getPosts().subscribe((data) => {

      this.fullItemsList =;
      this.items = [];

      for (let i =; i < 10; i++) {

      if (refresher != 0)

    }, (err) => {
      alert("Se produjo un error al cargar");


  getNext(infiniteScroll) {

    setTimeout(() => { = + 1;
      var next = ( * 10;
      for (let i = next; i < next + 10; i++) {
        if (i < this.fullItemsList.length)
    }, 500);

About the device logs…I’m afraid but this is happening on IonicView, so I don’t have any log I guess. On IonicDevApp is working just fine.

Thanks a lot for your help.

I don’t use either of those helper app things but I can tell you with about 90% certainty that it’s due to you using a local file path. IonicDevApp works with ionic serve, so you are just serving all your files over the internet. IonicDevApp just acts like a browser and loads them, so it’s perfectly happy to load your localhost:3000/assets/blabla.json

However, once you aren’t serving your files over the web and are instead installing them onto the phone, you are not allowed to simply make an http call into the phones file system…

You have to use the file plugin.

ok, thanks for the clear explanation and tips, mate. I’ll take a look at what you are pointing.

Thanks! :slight_smile:

No problem. Actually, a far simpler solution would be to just convert the json to a plain old javascript object.

Then put that into a regular .ts file right with your app service. So like you’d have


Then you can forget about all the http stuff and just load the file directly:

import { myDataObject } from './my-test-data'

getPosts(refresher) {
  return myDataObject;

That’s using fake variable/service names obviously, but, that would be the idea. THen it would work perfectly in both places with no additional work.

ok, thanks man, I’ll give it a try :+1: