Android build failed *FIREBASE Error*

I am using Firebase in my Ionic App wich works in (Browser and on iOS10). I tried to test the App on my Android device and i ran the command

ionic cordova run android

I got this error message.

Error: ./~/firebase/app/shared_promise.js
Module not found: Error: Can't resolve 'promise-polyfill' in 'Z:\DEVELOPEMENT\myfancyapp\node_modules\firebase\app'
resolve 'promise-polyfill' in 'Z:\DEVELOPEMENT\myfancyapp\node_modules\firebase\ap
p'
  Parsed request is a module
  using description file: Z:\DEVELOPEMENT\myfancyapp\node_modules\firebase\package
.json (relative path: ./app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: Z:\DEVELOPEMENT\myfancyapp\node_modules\firebase\p
ackage.json (relative path: ./app)
    resolve as module
      looking for modules in Z:\DEVELOPEMENT\myfancyapp\node_modules
        using description file: Z:\DEVELOPEMENT\myfancyapp\package.json (relative
path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: Z:\DEVELOPEMENT\myfancyapp\package.json (rel
ative path: ./node_modules)
          using description file: Z:\DEVELOPEMENT\myfancyapp\package.json (relativ
e path: ./node_modules/promise-polyfill)
            as directory
              Z:\DEVELOPEMENT\myfancyapp\node_modules\promise-polyfill doesn't exi
st
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              Z:\DEVELOPEMENT\myfancyapp\node_modules\promise-polyfill doesn't exi
st
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              Z:\DEVELOPEMENT\myfancyapp\node_modules\promise-polyfill.ts doesn't
exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              Z:\DEVELOPEMENT\myfancyapp\node_modules\promise-polyfill.js doesn't
exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              Z:\DEVELOPEMENT\myfancyapp\node_modules\promise-polyfill.json doesn'
t exist
[Z:\DEVELOPEMENT\myfancyapp\node_modules\promise-polyfill]
[Z:\DEVELOPEMENT\myfancyapp\node_modules\promise-polyfill]
[Z:\DEVELOPEMENT\myfancyapp\node_modules\promise-polyfill.ts]
[Z:\DEVELOPEMENT\myfancyapp\node_modules\promise-polyfill.js]
[Z:\DEVELOPEMENT\myfancyapp\node_modules\promise-polyfill.json]
 @ ./~/firebase/app/shared_promise.js 37:35-62
 @ ./~/firebase/app/firebase_app.js
 @ ./~/firebase/app.js
 @ ./~/firebase/database.js
 @ ./~/angularfire2/database/database.js
 @ ./~/angularfire2/database.js
 @ ./src/app/app.module.ts
 @ ./src/app/main.ts

This is my Module.ts


import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Vibration } from '@ionic-native/vibration';
import { Camera } from '@ionic-native/camera';
import { Base64ToGallery } from '@ionic-native/base64-to-gallery';
import { EmailComposer } from '@ionic-native/email-composer';
import { SMS } from '@ionic-native/sms';
import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@ionic-native/camera-preview';
import { PhotoLibrary } from '@ionic-native/photo-library';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { StartPage } from '../pages/start/start';


import { DatabaseserviceProvider } from '../providers/databaseservice/databaseservice';
import { UserAuthProvider } from '../providers/authservice/authservice';
import { AngularFireModule } from "angularfire2";
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

export const firebaseConfig = {
  apiKey: "----------",
  databaseURL: "----------",
  projectId: "----------",
  storageBucket: "----------",
  messagingSenderId: "----------"
};

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    StartPage,


  ],
  imports: [
	  BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    IonicModule.forRoot(MyApp, {
      backButtonText: 'Zurück',
    }
    )],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    StartPage,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Vibration,
    Camera,
    EmailComposer,
    SMS,
    Base64ToGallery,
	  CameraPreview,
	  PhotoLibrary,


    { provide: ErrorHandler, useClass: IonicErrorHandler },

    DatabaseserviceProvider,
    UserAuthProvider
  ]
})
export class AppModule { }

EDIT: I am on Windows by the way. This is my ionic info.

image

Thanks for any help! :slight_smile:

One quick workaround would probably be to run npm install --save-dev promise-polyfill.
Better might be to update @ionic/app-scripts to a recent version and see if it goes away.

1 Like

It gives me that error

image

Do you need the full debug.log ?

Then the quick workaround doesn’t work and you should upgrade app-scripts.

Okay, how do I do that ? Is there a command available for that ? :relaxed:

npm install --save-exact @ionic/app-scripts - but read the changelog on Github for breaking changes in 2.x.

I am getting the same error :sweat:

What version of Android is running on your Android device?

4.4.2
The Device is Rooted btw. Does this make any difference?

No idea, sorry.

Delete your package-log.json and /node_modules and run npm install.

I got it to run! I will write a guide how i got it to run later.

Im running my application on my android now and I am using this command at the momment to debug and do livereloads on my phone.

ionic cordova run android -l -c

I got the same error as i got at iOS9 Blackscreen only that the screen is white (also now on iOS9 but that aside).

I finally got some errorlogs and i hope you can read out the error. :innocent:

EDIT: One time it displayed this Page but it was bugged i couldn’t press any button. Also all Pages are white, since i tried to load different rootpages it always shows a white screen.

Also what ive tried already to remove the ‘style.display’ codes from HTML and TS same result.

I have also tried to remove all the FUNCTIONS and HTML codes and only used:
<ion-content>TEST</ion-content>
And a default TS without any functions.
Wich ended up that it works! Are some of the HTML codes not supported anymore because when i upgraded to ionic 3 i realized that as example <center> isn’t supported anymore.

Here are HTML commands i use in this Page.

<ion-content>
<img src>
<span>
<div>
<ion-item>
<i>

Functions in TS.

ngAfterViewInit()
ionViewDidLoad()

Do you need more of my Pagecode? I hope I provided enough information! :smile_cat:

Error: Uncaught (in promise): TypeError: Cannot set property 'display' of undefined TypeError: Cannot set property 'display' of undefined at http://192.168.1.100:8102/build/main.js:59941:41 at Array.map (native) at SettingsPage.ngAfterViewInit (http://192.168.1.100:8102/build/main.js:59940:31) at callProviderLifecycles (http://192.168.1.100:8102/build/main.js:11491:18) at callElementProvidersLifecycles (http://192.168.1.100:8102/build/main.js:11466:13) at callLifecycleHooksChildrenFirst (http://192.168.1.100:8102/build/main.js:11450:17) at checkAndUpdateView (http://192.168.1.100:8102/build/main.js:12482:5) at callWithDebugContext (http://192.168.1.100:8102/build/main.js:13536:42) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://192.168.1.100:8102/build/main.js:13076:12) at ViewRef_.detectChanges (http://192.168.1.100:8102/build/main.js:10548:63) at c (http://192.168.1.100:8102/build/polyfills.js:3:13190) at Object.reject (http://192.168.1.100:8102/build/polyfills.js:3:12546) at NavControllerBase._fireError (http://192.168.1.100:8102/build/main.js:44990:16) at NavControllerBase._failed (http://192.168.1.100:8102/build/main.js:44978:14) at http://192.168.1.100:8102/build/main.js:45033:59 at t.invoke (http://192.168.1.100:8102/build/polyfills.js:3:8971) at Object.inner.inner.fork.onInvoke (http://192.168.1.100:8102/build/main.js:4480:37) at t.invoke (http://192.168.1.100:8102/build/polyfills.js:3:8911) at r.run (http://192.168.1.100:8102/build/polyfills.js:3:4140) at http://192.168.1.100:8102/build/polyfills.js:3:13731

!!!UPDATE!!!
So what Ive tried now is, that i removed a TS function. Then it worked!

ngAfterViewInit()

heres the code to this function (maybe this one is wrong wich causes the error ?)

		let tabs = document.querySelectorAll('.show-tabbar');
		if (tabs !== null) {
			Object.keys(tabs).map((key) => {
				tabs[key].style.display = 'flex';
			});
		}

(Is there a new function for that particular one ?)

Update:
I am using afterViewInit() and it sadly doesn’t to work i don’t get an error either. Would be nice if someone could provide me the right code for an afterview event. I am still getting an error sometimes when i leave a site:

Cannot set property ‘display’ of undefined. I am using this function.

  ionViewWillLeave() {
	  let tabs = document.querySelectorAll('.show-tabbar');
	  if (tabs !== null) {
		  Object.keys(tabs).map((key) => {
			  tabs[key].style.display = 'none';
		  });

	  }
  }

I will run some tests and will try it out on iOS9 aswell and report my results. :bird: