App working properly in browser but not in android mobile

Hi forumates, I created an event management application.
I served it in browser using

  • ionic cordova run browser

I got all the data from the firebase properly.

but when i converted that into an debug-apk and ran in an android phone.

I did not get any value from the firebase.

here is my package.json

{
  "name": "JCI Madurai Temple City",
  "version": "0.0.1",
  "author": "geomeo",
  "homepage": "http://geomeoinformatics.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/call-number": "^4.5.2",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/email-composer": "^4.5.2",
    "@ionic-native/in-app-browser": "^4.5.2",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "angular2-jwt": "^0.2.3",
    "angularfire2": "5.0.0-rc.4",
    "call-number": "^1.0.1",
    "cordova-android": "7.0.0",
    "cordova-browser": "5.0.3",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-email-composer": "^0.8.11",
    "cordova-plugin-inappbrowser": "^2.0.1",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-whitelist": "^1.3.3",
    "firebase": "^4.8.0",
    "ionic-angular": "3.9.2",
    "ionic-img-viewer": "^2.9.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "mx.ferreyra.callnumber": "0.0.2",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.6",
    "typescript": "2.4.2"
  },
  "description": "An awesome application made for JCI members",
  "cordova": {
    "plugins": {
      "cordova-plugin-inappbrowser": {},
      "mx.ferreyra.callnumber": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-email-composer": {},
      "call-number": {}
    },
    "platforms": [
      "browser",
      "android"
    ]
  }
}

here is my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

//firebase modules
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { FIREBASE_CONFIG } from './app.firebase.config';

//components
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HometabPage } from '../pages/hometab/hometab';
import { MyLomPage } from '../pages/my-lom/my-lom';
import { HelpPage } from '../pages/help/help';
import { AboutPage } from '../pages/about/about';
import { CreedPage } from '../pages/creed/creed';
import { KotpaduPage } from '../pages/kotpadu/kotpadu';
import { ModalContentPage } from '../pages/about/modal-content';
// import { EventsPage } from '../pages/events/events';
import { EventDetailPage} from '../pages/event-detail/event-detail';
import { EventListPage } from '../pages/event-list/event-list';


import { InAppBrowser } from '@ionic-native/in-app-browser';
import { CallNumber } from '@ionic-native/call-number';
import { EmailComposer } from '@ionic-native/email-composer';

import { EventsProvider } from '../providers/events/events.provider';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { IonicImageViewerModule } from 'ionic-img-viewer';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MyLomPage,
    // EventsPage,
    EventListPage,
    HelpPage,
    HometabPage,
    AboutPage,
    CreedPage,
    KotpaduPage,
    ModalContentPage,
    EventDetailPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(FIREBASE_CONFIG),
    IonicImageViewerModule,
    AngularFireAuthModule,
    AngularFireDatabaseModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MyLomPage,
    // EventsPage,
    EventListPage,
    HelpPage,
    HometabPage,
    AboutPage,
    CreedPage,
    KotpaduPage,
    ModalContentPage,   
    EventDetailPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    InAppBrowser,
    CallNumber,
    EmailComposer,
    EventsProvider
  ]
})
export class AppModule {}

should I have to add any plugin or any other solution to this problem ?

Thanks in advance,
Deepak Kumar

1 Like

Provide logs, I have the same Issue with error ’ @firebase/firestore: Firestore (5.0.3): Could not reach Firestore backend. ’ and ’ the server responded with a status of 404 (Not Found) ’