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

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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 18
Comments: 34 (21 by maintainers)

Most upvoted comments

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.

+15

jamesdaniels on May 16, 2018

@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 {}

+14

paulstelzer on May 15, 2018

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

+12

fergalmoran on May 14, 2018

@ajonp

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

sarunint on May 14, 2018

@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 }

paulstelzer on May 15, 2018

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

juanlet on Jun 11, 2018

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.

codediodeio on May 15, 2018

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.

jamesdaniels on May 13, 2018

thanks

sherinali on May 28, 2018

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

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

tuneis on May 16, 2018