1

I'm upgrading to Angular 6 using AngularFire2. My app referenced 2 Firebase projects using code like this to create the database reference:

public initFirebaseApp(config: FirebaseAppConfig, firebaseAppName: string) {
        this._db = new AngularFireDatabase(_firebaseAppFactory(config, firebaseAppName));
    }

This code is now broken. I get this: 

ERROR in src/app/services/firebase.service.ts(24,25): error TS2554: Expected 5 arguments, but got 1.

Thanks!

Andrei Suvorkov
  • 5,559
  • 5
  • 22
  • 48
RichardZ
  • 345
  • 2
  • 6
  • 18

1 Answers1

3

AngularFire now support many more configuration objects via Injection now, which is why it's expecting more arguments. It currently takes:

constructor(
  @Inject(FirebaseOptionsToken) options:FirebaseOptions,
  @Optional() @Inject(FirebaseNameOrConfigToken) nameOrConfig:string|FirebaseAppConfig|undefined,
  @Optional() @Inject(RealtimeDatabaseURL) databaseURL:string,
  @Inject(PLATFORM_ID) platformId: Object,
  zone: NgZone
)

Though now that we support dependency injection, I wouldn't suggest directly initializing like you are to support multiple apps. We have an open issue for documenting this but you can now inject different FirebaseOptions via the FirebaseOptionsToken into different components, if you need multiple databases in the same component use something like this:

@Injectable()
export class AngularFireDatabaseAlpha extends AngularFireDatabase { }

@Injectable()
export class AngularFireDatabaseBeta extends AngularFireDatabase { }


export function AngularFireDatabaseAlphaFactory(platformId: Object, zone: NgZone): Project1AngularFireAuth {
  return new AngularFireDatabaseAlpha(environment.firebase[0], 'alpha', undefined, platformId, zone)
}
export function AngularFireDatabaseBetaFactory(platformId: Object, zone: NgZone): Project2AngularFireAuth {
  return new AngularFireDatabaseBeta(environment.firebase[1], 'beta', undefined, platformId, zone)
}


@NgModule({
  ...,
  providers: [
    ...,
    { provide: AngularFireDatabaseAlpha, deps: [PLATFORM_ID, NgZone], useFactory: AngularFireDatabaseAlphaFactory },
    { provide: AngularFireDatabaseBeta, deps: [PLATFORM_ID, NgZone], useFactory: AngularFireDatabaseBetaFactory },
    ...
  ],
  ...
})

Then you can just rely on Dependency Injection to get AngularFireDatabaseAlpha and AngularFireDatabaseBeta into your component.

James Daniels
  • 6,883
  • 4
  • 24
  • 28
  • Got idea from this answer to figure out the solution for my case here https://stackoverflow.com/questions/51922195/can-not-have-access-to-multiple-google-firestore-db-in-angular-6-application-wit – Farhad Aug 20 '18 at 04:01
  • Other searched related items just to share: angularfire2 issue #1240 (https://github.com/angular/angularfire2/issues/1240) or #1305 (https://github.com/angular/angularfire2/issues/1305). – Farhad Aug 20 '18 at 04:27
  • Have you tried deploying or launching the app in prod mode. When angular's optimizer is used the dependency injection crashes on pre-build of the app – Vadim Cote Jun 21 '19 at 15:46
  • This solution is not working anymore because AngularFireAuth expects more parameters now see : https://stackoverflow.com/questions/71272920/how-to-have-multi-project-firebase-using-angularfire – Noah13 Feb 27 '22 at 19:03