Initialize the config dynamically outside app.module.ts

[olivier-po]

I'm trying to solve a use case where I need to connect to one database first to get some kind of a token and references of another database and then connect to the second database. I don't know in advance the config of the second database (only the first one). I can't hard code the second one in my app.

So, I need to be able to initialize a config to a firebase database dynamically. I already check #306 and #761 but none is giving me a real answer on how to perform it. And I checked already https://firebase.google.com/docs/configure/ but I would prefer to keep AngularFire2.

I'm using Ionic 3.5 and angularfire2 "4.0.0-rc.1".
I basically need to call AngularFireModule.initializeApp(secondDatabaseConfig) somehow later in my code not in my app.module.ts

Is it possible ? How would you solve it with AngularFire2 ?

I'm even ready to use a usual WebService to get the config to my second database, so I wouldn't need the first connection. But I'm blocked on instantiating the connection to Firebase dynamically.

The idea behind all of it is to provide to each of my customers their own firebase database (for security reasons) but where they all share the same app. The Firebase Java backend has total control of the database and I need to provide this Java backend to all of my customers...

Thank you for your amazing job

[ValentinFunk]

Suppose you could create your own token instead of using the default and set it up in an APP_INITIALIZER (this would require a valid user at all times):

app.module.ts

@Injectable()
export class SecondApp {
  database: AngularFireDatabase;
  auth: AngularFireAuth;

  constructor() {}

  initialize(app: firebase.app.App) {
    this.database = new AngularFireDatabase(app);
    this.auth = new AngularFireAuth(app);
  }
}

export function firebaseLoader(secondApp: SecondApp) {
  return () => {
    const firstApp = firebase.initializeApp({
     // Put firebase config for first app here 
    }, 'controlApp');

    const auth = new AngularFireAuth(firstApp);
    const db = new AngularFireDatabase(firstApp);
    return auth.authState.filter(user => !!user).map(user => {
      return db.object(`configs/${user.uid}`);
    }).map(configObject => {
      const secondAppConfig = firebase.initializeApp(configObject, 'secondApp');
      secondApp.initialize(secondAppConfig);
    }).first();
  };
}
@NgModule({
  ...,
  providers: [
    SecondApp,
    {
      provide: APP_INITIALIZER,
      useFactory: firebaseLoader,
      deps: [ SecondApp ],
      multi: true
    }
  ]
})
export class AppModule { }

Then instead of injecting AngularFireDatabase or AngularFireAuth you inject SecondApp and use the database and auth properties. You can use this approach without the initializer as well of course, e.g. using a route guard with a login form and just call SecondApp.initialize() as often as you like. Don't think you are bound to use the AngularFireDatabase or FirebaseApp tokens, it's more of a convenience.

To make it cleaner you could perhaps name your apps as well when constructing them and delete the ones not required anymore (you can do app.delete() to free ressources of an app you don't need anymore). Then use a map on your service that and create the AngularFire Services for each of the apps.

[jamesdaniels]

Closing since not an Issue, feel free to continue discussing.

[ralph-fuechtenkort]

@kamshak
didn't get you code running on a ionic3 app.module.ts.
My Versions are:
"@angular/common": "4.4.4",
"@angular/compiler": "4.4.4",
"@angular/compiler-cli": "4.4.4",
"@angular/core": "4.4.4",
"@angular/forms": "4.4.4",
"@angular/http": "4.4.4",
"@angular/platform-browser": "4.4.4",
"@angular/platform-browser-dynamic": "4.4.4",
"@ionic-native/core": "4.3.2",
"@ionic-native/splash-screen": "4.3.2",
"@ionic-native/status-bar": "4.3.2",
"@ionic/storage": "2.0.1",
"angularfire2": "^5.0.0-rc.3",
"firebase": "^4.6.0",
"ionic-angular": "3.8.0",
My imports are as followed:
import * as firebase from 'firebase'
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFirestore } from 'angularfire2/firestore';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import {TestService} from './test.service';

Th errors are in:
this.database = new AngularFireDatabase(app);
this.auth = new AngularFireAuth(app);
"Argument of type App is not assignable to parameter of type FirebaseApp
The same happens here:
const auth = new AngularFireAuth(firstApp);
const db = new AngularFireDatabase(firstApp);

I am pretty new to firebase, just evaluating it for a new project so i think i make a stupid beginners error :)
Any help appreciated, thanks

[efraespada]

@ralph-fuechtenkort this solution works for me getting the Firebase configuration from a JSON assets file:
main.ts

fetch('/assets/config.json').then(resp => resp.json()).then(config => {
  window['firebase_config'] = config.firebase;
  window['config'] = config;
  platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));
});

app.module.ts

export function initializeApp(appConfig: AppConfigService) {
  return appConfig.fireConfig()
}

@NgModule({
  imports: [
    AngularFireModule,
    AngularFireAuthModule,
    AngularFireStorageModule
  ],
  providers: [
    AppConfigService,
    {
      provide: FirebaseOptionsToken,
      deps: [AppConfigService],
      useFactory: initializeApp
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.config.service.ts

@Injectable({
  providedIn: 'root'
})
export class AppConfigService {
  static settings: IAppConfig;
  constructor() {}
  fireConfig() {
    AppConfigService.settings = window['config'];
    return window['firebase_config']
  }
}

assets/config.json

{
  "production": true,
  "name": "Hello world",
  "firebase": {
    "apiKey": "...",
    "authDomain": "...",
    "databaseURL": "...",
    "projectId": "...",
    "storageBucket": "...",
    "messagingSenderId": "..."
  }
}

i.app.config.ts

export interface IAppConfig {
  production: boolean;
  name: string;
  firebase: {
    apiKey: string;
    authDomain: string;
    databaseURL: string;
    projectId: string;
    storageBucket: string;
    messagingSenderId: string;
  };
}

I think it's similar on a ionic3 app.