Error initializing Firebase in a Library

[jlmonteagudo]

I have created a library to manage all the Firebase access logic in the library, but I'm getting an error initializing Firebase in my library.

The idea is to isolate my app from Firebase. So, the library is going to manage the Firebase database access and the app won't know anything about Firebase (only will know the firebase config information).

Version info

Angular: 8.2.0

Firebase: 7.2.0

AngularFire: 5.2.1

How to reproduce these conditions

Create a library and define the main module of the library in this way:

data-access.module

@NgModule({
  imports: [CommonModule]
})
export class DataAccessModule {

  static initialize(firebaseConfig: any) {
    return {
      ngModule: DataAccessModule,
      imports: [
        AngularFireModule.initializeApp(firebaseConfig),
        AngularFirestoreModule
      ],
      providers: [
        AngularFirestore
      ]
    }
  }

}

Then initialize the library in the app in this way:

app.module

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserAnimationsModule,
    AppRoutingModule,
    LayoutModule,
    DataAccessModule.initialize(environment.firebase)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Debug output

In the web browser console I get this error:

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[AngularFirestore -> InjectionToken angularfire2.app.options]: 
  StaticInjectorError(Platform: core)[AngularFirestore -> InjectionToken angularfire2.app.options]: 
    NullInjectorError: No provider for InjectionToken angularfire2.app.options!
NullInjectorError: StaticInjectorError(AppModule)[AngularFirestore -> InjectionToken angularfire2.app.options]: 
  StaticInjectorError(Platform: core)[AngularFirestore -> InjectionToken angularfire2.app.options]: 
    NullInjectorError: No provider for InjectionToken angularfire2.app.options!
    at NullInjector.get (core.js:855)
    at resolveToken (core.js:17513)
    at tryResolveToken (core.js:17439)
    at StaticInjector.get (core.js:17265)
    at resolveToken (core.js:17513)
    at tryResolveToken (core.js:17439)
    at StaticInjector.get (core.js:17265)
    at resolveNgModuleDep (core.js:30392)
    at _createClass (core.js:30469)
    at _createProviderInstance (core.js:30425)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39679)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

Could you help me explaining the best way to manage this use case?

Thank you very much in advance.

[beazergood]

Hi @jlmonteagudo I'm trying to do the same thing, did you ever get it working?

[trevorhreed]

I haven't been able to find documentation that supports the ability to return a ModuleWithProviders that includes an imports property, only a providers property, nor was I able to get this working by fiddling around with the code. Are you aware of something I'm not? I would love to be able to use angularfire inside a library as well, but for the life of me, haven't found a way to do it yet. :(

[jamesdaniels]

Since we've switched to using providedBy any in Firebase v6 this should be a lot easier. Closing as outdated.