Solved lambda issues building production w/AngularFire2 and Firebase

Ionic Framework ionic-v3
1

I’ve been tearing my hair out the last few days dealing with the situation where building for production resulted in errors from my Angularfire / Firebase having been initialized through anonymous function (lambdas). This is the command to build a production version of my project:

npm run ionic:build --prod

Now that it’s working I can tell you that it reduced the size of my www directory, which is what’s being served to deliver my app, from 19MB to 10MB.

So, after reading lots of stuff and seeing multiple ways people initialize Firebase I finally figured out a solution that eliminated the build errors and allowed me to create the app in production mode. It came by reading a comment related to https://github.com/angular/angularfire2/issues/464. So, while this might be obvious to many, it wasn’t for me because I had been starting with a project that appeared, from all accounts, to work perfectly and was successfully configuring and initializing Firebase. Just not, as it would turn out, in a manner compatible with the production generating scripts.

Here’s how I used to initialize firebase and AngularFire. It was through app.component.ts which used to look like the following (only the firebase related stuff is shown):

import firebase from 'firebase';

import {FIREBASE_PROVIDERS,
        defaultFirebase,
        AngularFire,
        AuthMethods,
        AuthProviders,
        firebaseAuthConfig
      } from 'angularfire2';

export const firebaseConfig = {
    apiKey: "AIzaSyCguSXXXXXXXXXXH4UkX5e34UVMmi_us",
    authDomain: "eXXXXXXXXtime.firebaseapp.com",
    databaseURL: "https://eXXXXXXXXXXebaseio.com",
    storageBucket: "esXXXXXXXXXime.appspot.com",
    messagingSenderId: "55XXXXXXX973"
  };


@Component({
  templateUrl: 'app.html',
  providers: [
    Storage,
    FIREBASE_PROVIDERS,
    defaultFirebase (firebaseConfig),
    firebaseAuthConfig ({
      provider: AuthProviders.Password,
      method: AuthMethods.Password
    })
  ]
})

I removed the firebase stuff completely from app.component.ts and moved it to app.module.ts which has these parts:

import firebase from 'firebase';
import {FIREBASE_PROVIDERS,
        // defaultFirebase,
        AngularFireModule,
        AngularFireAuth,
        AngularFire,
        AuthMethods,
        AuthProviders,
        // firebaseAuthConfig
      } from 'angularfire2';

export const firebaseConfig = {
    apiKey: "AIzaSyCguSXXXXXXXXXXH4UkX5e34UVMmi_us",
    authDomain: "eXXXXXXXXtime.firebaseapp.com",
    databaseURL: "https://eXXXXXXXXXXebaseio.com",
    storageBucket: "esXXXXXXXXXime.appspot.com",
    messagingSenderId: "55XXXXXXX973"
  };

export const authConfig = {
    provider: AuthProviders.Password,
    method: AuthMethods.Password
  };

and in the @NgModule@ section adds to imports:

  imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp (firebaseConfig, authConfig)
  ],

The important difference was that in app.component.ts I used to initialized Firebase via initializing it through anonymous functions in the providers sections of @Component.

Now I explicitely call

AngularFireModule.initializeApp (firebaseConfig, authConfig)

In the @NgModule section of app.module.ts.

I hope this is helpful to someone. Now on to other challenges for me, of which there are many! :slight_smile:

1 Like