CODEWITHSUNDEEP
javascriptangularfirebasefirebase-realtime-databaseangularfire2
AngularM
AngularM

Reputation: 16628

Can my angular app have two firebase configurations

I want to be able to toggle between 2 databases from 2 different firebase apps that I've made.

I'm using angular version 7 and AngularFireModule to initialise the config

I want to toggle between firebaseAdmin and firebaseProd.

As you can see below I've tried to initialise like so:

AngularFireModule.initializeApp(environment.firebaseAdmin, 'firebaseAdmin'),
AngularFireModule.initializeApp(environment.firebaseProd, 'firebaseBehired'),

This is my app module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabase } from '@angular/fire/database';

import { ROUTES } from './app.routes';
import { environment } from '../environments/environment';

// Components
import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { ListsComponent } from './components/lists/lists.component';

// Services
import { AuthService } from './services/auth.service';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ListsComponent,
  ],
  imports: [
    AngularFireModule.initializeApp(environment.firebaseAdmin, 'firebaseAdmin'),
    AngularFireModule.initializeApp(environment.firebaseProd, 'firebaseBehired'),
    AngularFireAuthModule,
    BrowserModule,
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    RouterModule.forRoot(ROUTES)
  ],
  providers: [
    AuthService,
    AngularFireDatabase
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Outcome I'm looking for:

I'd like to toggle between environment.firebaseProd and environment.firebaseAdmin firebase configs in my authService.

Example of one of my configs:

export const environment = {
  production: false,
  firebaseAdmin: {
    apiKey: 'fillerText',
    authDomain: 'admin.firebaseapp.com',
    databaseURL: 'https://admin.firebaseio.com',
    projectId: 'admin',
    storageBucket: 'admin.appspot.com',
    messagingSenderId: 'fillerText'
  },
  firebaseProd: {
    apiKey: 'fillerText',
    authDomain: 'prod-project.firebaseapp.com',
    databaseURL: 'https://prod.firebaseio.com',
    projectId: 'prod',
    storageBucket: 'prod.appspot.com',
    messagingSenderId: 'fillerText'
  }
};

Upvotes: 4

Views: 1542

Answers (2)

Haris Bouchlis
Haris Bouchlis

Reputation: 2566

I know this is an old question, but for people still looking, yes it is possible to use multiple firebase configurations in one angular app.

You can see a complete example fully explained here paired with working code.

Basically you have to use @Inject to change which firebase app is used in a given component. I still don't know of a way to toggle between the two in a single component but i'm pretty sure you can work around that part.

Upvotes: 0

Hilal Kaldane
Hilal Kaldane

Reputation: 145

Yes you can . But you can only use one environment at a time i.e either Admin or Prod

You cannot do that in runtime though.

Comment out any one of the below in Imports of app.module.ts

AngularFireModule.initializeApp(environment.firebaseAdmin)
AngularFireModule.initializeApp(environment.firebaseProd)

Upvotes: 1

Related Questions