Error building to production with ionic 3 and AngularFireDatabase

[JavierConde]

Hello,

i'm trying to build to production an ionic application but when i try to run the command line is stopped forever.

cli packages: (C:\Users\Javier\AppData\Roaming\npm\node_modules)

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

global packages:

cordova (Cordova CLI) : 8.1.2 ([email protected])

local packages:

@ionic/app-scripts : 3.2.1
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v8.12.0
npm  : 6.4.1
OS   : Windows 10

My Package:
"@angular/fire": "^5.1.1",
"angularfire2": "^5.1.1",

My app.module:
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule, AngularFireDatabase } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';

when i run the command:
Running app-scripts build: --prod --platform android --target cordova
[11:45:04] build prod started ...
[11:45:04] clean started ...
[11:45:04] clean finished in 3 ms
[11:45:04] copy started ...
[11:45:04] deeplinks started ...
[11:45:05] deeplinks finished in 432 ms
[11:45:05] ngc started ...
[11:45:19] ngc finished in 14.78 s
[11:45:19] preprocess started ...
[11:45:19] preprocess finished in 1 ms
[11:45:19] webpack started ...
[11:45:20] copy finished in 15.78 s

stop forever in that line "copy finished in..."

Can you help me with that?
thanks.

[alberthoekstra]

Could you at least format it correctly? With script tags and such? This isn’t really readable.

[JavierConde]

Hello, sorry for the interspersed text.

The problem is that it hangs on that line, if I use the AngularFireDatabase module.

These are the packages that I am using.

One solution that I found, was to make a downgrade of the Database version:

npm install firebase angularfire2 --save
npm uninstall @ firebase / database
npm install @ firebase / database @ 0.2.1

in this way I was able to compile without problems.

But the error would be in some version incompatibility.

[jtpdev]

I have the same problema when I import the AngularFireDatabaseModule to my app.module.ts in ionic project.

[salmoro]

Had the same experience and this was quite jarring as you develop without --prod and all works well but then you go to build for prod (in my case a huge chunk of code) and it hangs with no clues of what the issue might be.

For me the issue turned out to be the mere fact that I was importing the firebase package in my app (e.g. import {firestore} from 'firebase'). The moment I've removed that import everything worked (including Auth and Firestore).

I've tried rolling-back several versions on both the firebase and @angular/fire packages but none of that helped.

So for now, as an alternative for the only function I need from the firebase package which is Timstamp.fromMillis() I'm using the native new Date() but I'm sure this won't be a long term solution as I can see myself quickly needing other utility functions from the firebase package.

[jtpdev]

Someone knows a workaround to make it work?

[salmoro]

@jtpdev the solution I used won't do it for you?

[jtpdev]

Well I'm using AngularFireDatabase to access the database, so I cannot remove the AngularFireDatabaseModule import.

[salmoro]

@jtpdev that actually wasn't my solution. Read above.

[jtpdev]

Oh I think I understood... I'm going home now anda I'll tri do ti.

[jtpdev]

@salmoro, If I understood right, the fix you found was to remove the import of firestone, correct? If so, I can not do it, because I do not have this import in the code anywhere :(

My imports are:

// app.module.ts
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireStorageModule } from '@angular/fire/storage';

// provider.ts
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';

// auth.service.ts
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';
import AuthProvider = firebase.auth.AuthProvider;

And in my package json I have:

"@angular/fire": "^5.1.0",
"firebase": "^5.5.6",

Any idea?

[salmoro]

@jtpdev
Remove import * as firebase from 'firebase/app';
Though IDK that your app can manage without it.

[jtpdev]

I try remove firebase import and remove it of my package.json as well. But now don't build 'cause the @angular/fire didn't find the firebase/app

[09:56:38]  typescript: ...cts/ionic-projects/garcomnet/node_modules/@angular/fire/firebase.app.module.d.ts, line: 2
            Cannot find module 'firebase/app'.

       L1:  import { InjectionToken } from '@angular/core';
       L2:  import { app, auth, database, firestore, functions, messaging, storage } from 'firebase/app';
       L3:  export declare type FirebaseOptions = {

[09:56:38]  typescript: C:/projects/ionic-projects/garcomnet/node_modules/@angular/fire/auth/auth.d.ts, line: 4
            Cannot find module 'firebase/app'.

       L3:  import { FirebaseAppConfig, FirebaseOptions } from '@angular/fire';
       L4:  import { User, auth } from 'firebase/app';
       L5:  import { FirebaseAuth } from '@angular/fire';

[09:56:38]  typescript: ...cts/ionic-projects/garcomnet/node_modules/@angular/fire/database/interfaces.d.ts, line: 2
            Cannot find module 'firebase/app'.

       L1:  import { Observable } from 'rxjs';
       L2:  import { database } from 'firebase/app';
       L3:  export declare type FirebaseOperation = string | database.Reference | database.DataSnapshot;

[09:56:38]  typescript: ...ects/ionic-projects/garcomnet/node_modules/@angular/fire/storage/interfaces.d.ts, line: 1
            Cannot find module 'firebase/app'.

       L1:  import { storage } from 'firebase/app';
       L2:  export declare type UploadTask = storage.UploadTask;

[09:56:38]  typescript: ...c-projects/garcomnet/node_modules/@angular/fire/storage/observable/fromTask.d.ts, line: 3
            Cannot find module 'firebase/app'.

       L2:  import { UploadTask } from '../interfaces';
       L3:  import { storage } from 'firebase/app';
       L4:  export declare function fromTask(task: UploadTask): Observable<storage.UploadTaskSnapshot>;

[salmoro]

Remove all imports from firebase (including { User, auth, etc. })
If that doesn't work then you'll have to wait for some help from the angularfire2 folks or someone else. Hopefully the info we've provided above can help guild them to finding the source of this bug and fixing it.

[jtpdev]

I removed all imports from firebase, the problem above occurs inside the @angular/fire 😥
Thanks @salmoro

I'll wait...

[nilebma]

I am using [email protected] and AngularFire 5.1.1 with [email protected], and I am facing the same issue as you @jtpdev. It is impossible to build the ionic project with the --prod flag. The build process freezes at the same step you mentioned.

I tried many workarounds and downgrading "@firebase/database" to 0.2.1 (instead of the 0.3.8 version which ship with [email protected]) was the only solution which worked for me.

npm i @firebase/[email protected]

However I am not sure it is a robust solution for shipping an app in production.

Any more recent version (from 0.2.2) will cause the same problem.

I found this solution thanks to @JNSantiago on this issue. The same problem seems to be discussed on the ionic repo here.

[jtpdev]

@nilebma it works perfectly. Thanks a lot.

[jamesdaniels]

Seems like this was addressed.