Angularfire: AngularFireModule.initializeApp(...) fails in ng6 prod build

[jymdman]

Version info

Angular:
^6.0.0

Firebase:
^5.0.2

AngularFire:
5.0.0-rc.8.1-next

Other (e.g. Ionic/Cordova, Node, browser, operating system):

How to reproduce these conditions

Failing test unit, Plunkr, or JSFiddle demonstrating the problem

Steps to set up and reproduce

AngularFireModule.initializeApp(....) fails when build with prod:

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'AngularFireModule' was called.

NgModule looks like:

@NgModule({
  declarations: [AppComponent, LoginComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    RouterModule.forRoot(APP_ROUTES),
    SharedModule,
    AngularFireModule.initializeApp(environment.firebase, 'stalldata'),
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireStorageModule,
    HomeModule,
    ArtiklarModule,
    MaskinerModule,
    StallbladModule,
    DialogsModule
  ],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Solution is to drop .initializeApp(...) and use providers like this:

@NgModule({
  declarations: [AppComponent, LoginComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    RouterModule.forRoot(APP_ROUTES),
    SharedModule,
    AngularFireModule,
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireStorageModule,
    HomeModule,
    ArtiklarModule,
    MaskinerModule,
    StallbladModule,
    DialogsModule
  ],
  providers: [
    { provide: FirebaseOptionsToken, useValue: environment.firebase },
    { provide: FirebaseAppNameToken, useValue: 'stalldata' },
    { provide: FirebaseAppConfigToken, useValue: undefined }
  ],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Sample data and security rules

<-- include/attach/link to some json sample data (or provide credentials to a sanitized, test Firebase project) -->

Debug output

* Errors in the JavaScript console *

* Output from firebase.database().enableLogging(true); *

* Screenshots *

Expected behavior

Don't know if this is the expected behavior with rc8?
If it is, docs should be updated when rc8 is released to match this. (I can create a fix for this)

Actual behavior

[Celtiore]

angularfire2 @next rc8 :+1
firestore.d.ts :
constructor(options: FirebaseOptions, config: FirebaseAppConfig, name: string, shouldEnablePersistence: boolean, settings: Settings, platformId: Object, zone: NgZone);

why 7 arguments ?

[jymdman]

Relates to angular/angular#23609

[jamesdaniels]

It seems like it's not an issue with us but angular, I'll leave this open for now though so people can find it and incase angular gives us any direction. E.g, we should do something different with our metadata.

[sarunint]

@jamesdaniels But why this issue doesn't appear in rc7 but only rc8. The call signature is same. Or I am missing something?

[jamesdaniels]

I'm presuming it just has something to do with ng6; but we did change a couple other things since rc7. Namely the addition of AppConfig.

Wait... I might have just thought with something. I did clear out the old overloaded method style as we are using optionals and tslint was complaining about it being unnecessary, maybe that had something to do with it. Let me experiment with that.

[jymdman]

There also is some suggestions in the angular issue that seems to solve this for others: comment
Maybe that is a hack and isn't the right solution...

[jamesdaniels]

Yeah, no dice on that change; I did it before rc7.

[brijmcq]

I'm having this error too.
My temporary fix ( not recommended ) for now is to make aot and buildOptimizer to false in angular.json

[jamesdaniels]

@brijmcq I'd recommend the work-around stated in the issue body in the meantime.

[paulstelzer]

@jymdman Thanks for providing the new way to init the firebase config

[alsit]

To me in Ionic 3 I have that problem as I configure the buildOptimizer.?

[sarunint]

What is the current workaround (for now)?

[paulstelzer]

@sarunint As @jymdman wrote:

Solution is to drop .initializeApp(...) and use providers like this:

@NgModule({
  declarations: [AppComponent, LoginComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    RouterModule.forRoot(APP_ROUTES),
    SharedModule,
    AngularFireModule,
    AngularFirestoreModule,
    AngularFireAuthModule,
    AngularFireStorageModule,
    HomeModule,
    ArtiklarModule,
    MaskinerModule,
    StallbladModule,
    DialogsModule
  ],
  providers: [
    { provide: FirebaseOptionsToken, useValue: environment.firebase }
  ],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

[jamesdaniels]

FYI #1641 will make this cleaner by making name and appconfig optional.

[ajonp]

Sorry, where do I locate the types for the providers? This has them but fails to load as Module does not exist here.

import {
  FirebaseOptionsToken,
  FirebaseAppNameToken,
  FirebaseAppConfigToken
} from "@firebase";import {
  FirebaseOptionsToken,
  FirebaseAppNameToken,
  FirebaseAppConfigToken
} from "@firebase";

[sarunint]

@ajonp

import {
  AngularFireModule,
  FirebaseOptionsToken,
  FirebaseAppNameToken,
  FirebaseAppConfigToken
} from 'angularfire2';

[ajonp]

Humm that throws

:
"Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)."

[fergalmoran]

@ajonp Same here.
Getting tired now of firebase constantly breaking my build.

[paulstelzer]

@ajonp @fergalmoran at the providers, just use
{ provide: FirebaseOptionsToken, useValue: environment.firebase }

where ' environment.firebase' is the path to your firebase config!

If you need a AppNameToken or AppConfigToken, you can use the following (replace undefined (default) with the token you want to use)

        { provide: FirebaseAppNameToken, useValue: undefined },
        { provide: FirebaseAppConfigToken, useValue: undefined }

[alsit]

The truth is all very confusing and it is not clear.
What was previously used was AngularFireModule.initializeApp and the firebase config file firebaseConfig was kept as indicated by the documentation now where it should be used.
And the modules AngularFireDatabaseModule, AngularFireDatabase that are used to access the base are configured or not, because that is what I can not understand yet.
Because in a new project only with angularfire2 and adding in the app.module AngularFireDatabaseModule, AngularFireDatabase the command ionic cordova build android --prod --release is still stuck.

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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

// import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

import {
AngularFireModule,
FirebaseOptionsToken,
FirebaseAppNameToken,
FirebaseAppConfigToken
} from 'angularfire2';

export const firebaseConfig = {
apiKey: "AIzaSyC_t5XQmq4O81BOEIPKqRBXAsEcOoXZJmQ",
authDomain: "pencaonline.firebaseapp.com",
databaseURL: "https://pencaonline.firebaseio.com",
projectId: "pencaonline",
storageBucket: "pencaonline.appspot.com",
messagingSenderId: "698016836224"
};

@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule,
AngularFireAuthModule,
AngularFireDatabaseModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
AngularFireDatabase,
{ provide: FirebaseOptionsToken, useValue: firebaseConfig },
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

[sarunint]

@alsit remove AngularFireDatabase from providers array.

And add these 2 object to the providers array.

{ provide: FirebaseAppNameToken, useValue: '[DEFAULT]' },
{ provide: FirebaseAppConfigToken, useValue: undefined }

[codediodeio]

I think the Angular compiler is having trouble analyzing these lines initializeApp.

https://github.com/angular/angularfire2/blob/a8414f5d62ec073db760e0b7e9346e4d946bd3a3/src/core/firebase.app.module.ts#L50-L51

Possible Solution?

Force the second arg to initializeApp to be a FirebaseAppConfig object and remove the string union type, which would also eliminate he need for optional deps. It'd be a breaking change, but minor.

[tuneis]

It works for me when I add just the main provider instead of all of them.

{ provide: FirebaseOptionsToken, useValue: environment.firebase },

[alexbjorlig]

I get this error when trying to import FirebaseOptionsToken from angularfire2:

Module '"/Users/alexbjorlig/Documents/eddystone/node_modules/angularfire2/index"' has no exported member 'FirebaseOptionsToke

[jamesdaniels]

Just cut rc.9, which fixes this issue. We've replaced FirebaseAppConfigToken and FirebaseAppNameToken with a new FirebaseNameOrConfigToken which takes a string | FirebaseAppConfig.

Sorry for the breaking change folks, I put a --prod build task in our Travis setup so now we'll be able to catch stuff like this earlier.

Thanks for all your patience and being awesome users!

Btw, to sweeten the deal I got the AngularFireFunctionsModule merged and pushed with rc.9; you should give it a shot ;) Getting FCM support in will be my next priority.

[sherinali]

thanks

[juanlet]

Could you describe the solution? I'm having trouble with that line for --aot option....Which are the steps to replace AngularFireModule.initializeApp(environment.firebase) statement? since it's the line is breaking the build

[paulstelzer]

Update to the latest version of angularfire2, there this issue is fixed

[juanlet]

I fixed the issue but i had to put angularfire2 initialization in providers array, otherwise it was not fixed....I have the last version

[innovationven]

I can`t solve the problem, please i need help :

ionic 3.20.0
cordova 8.0.0

"firebase": "^5.2.0-0",
"angularfire2": "^5.0.0-rc.8.1-next",
"promise-polyfill": "^8.0.0",

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

import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

//I deleted the firebase data for post here, but this data is setup good in my code
export const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { InAppBrowser } from '@ionic-native/in-app-browser';

import { CallNumber } from '@ionic-native/call-number';

import { HttpClientModule } from '@angular/common/http';

import { OneSignal } from '@ionic-native/onesignal';

import { UsuarioSesionService } from '../providers/usuario-sesion';

@NgModule({
declarations: [
MyApp,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),

AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule,
AngularFireAuthModule,

HttpClientModule,

],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
AngularFireDatabase,

UsuarioSesionService,
InAppBrowser,

CallNumber,
OneSignal,
InAppBrowser,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]
})
export class AppModule {}

[sarunint]

@innovationven see https://github.com/angular/angularfire2/issues/1635#issuecomment-389568397

[innovationven]

I did see that comment but the problem is the same, i don`t know what to do

[sarunint]

Just cut rc.9, which fixes this issue. We've replaced FirebaseAppConfigToken and FirebaseAppNameToken with a new FirebaseNameOrConfigToken which takes a string | FirebaseAppConfig.

Please update to rc.9 or greater.

[therepo90]

{ provide: FirebaseOptionsToken, useValue: environment.firebase } fixed my issue