Allow multiple Firebase Apps in single site

[codercatdev]

Change AngularFireModule providers to include factories

Allow for the FirebaseAppConfig to be passed using a Factory, so that you can dynamically set each app.

angularfire/src/core/firebase.app.module.ts

Line 59 in 73d5a1f

providers: [

Changing

export declare class AngularFireModule {
    static initializeApp(options: FirebaseOptions, nameOrConfig?: string | FirebaseAppConfig): ({
        ngModule: typeof AngularFireModule;
        providers: {
            provide: InjectionToken<string | FirebaseAppConfig>;
            useValue: string | FirebaseAppConfig;
        }[];
    })&{ngModule:AngularFireModule};
    constructor(platformId: Object);
    static ɵmod: ɵngcc0.ɵɵNgModuleDefWithMeta<AngularFireModule, never, never, never>;
    static ɵinj: ɵngcc0.ɵɵInjectorDef<AngularFireModule>;
}

to something like this (fully admit not that good with DI).

export declare class AngularFireModule {
    static initializeApp(
options: () => FirebaseOptions,
nameOrConfig?: () =>  string | FirebaseAppConfig,
): ({
        ngModule: typeof AngularFireModule;
      providers:
        [
          {
            provide: FIREBASE_OPTIONS,
            useFactory: options
          },
          {
            provide: FIREBASE_APP_NAME,
            useFactory: nameOrConfig
          },
        ]
    })&{ngModule:AngularFireModule};
    constructor(platformId: Object);
    static ɵmod: ɵngcc0.ɵɵNgModuleDefWithMeta<AngularFireModule, never, never, never>;
    static ɵinj: ɵngcc0.ɵɵInjectorDef<AngularFireModule>;
}

[jamesdaniels]

Let me look into this, it's possible we might change the API in the future, in the meantime I'll better document how to work with multiple apps.

[Ajayachathru]

dear @jamesdaniels how to work with multiple apps ..?

Thanks in advance

[Ajayachathru]

Hi @Ajonp , have you got any solution ?.. we have a similar requirement to load firebase config dynamically.

Thanks in advance

[codercatdev]

Somewhat of a solution, it is a little excessive for an example.
https://github.com/ajonp/ajonp-blackcatcms/blob/c8f07154956b3faf49b38e28719b05bf2d124646/src/app/components/webapp/guards/logged-in-user-role.guard.ts#L35

This application logs you into all your GCP projects and allows you to turn them into Firebase Projects (it lists FB projects as well). You are able to then log into or create several web applications, which intern allows you to log into each site using AngularFireAuth.

You can try it here https://ajonp-blackcatcms-beta.web.app/, but I haven't worked on it in a long time unfortunately.