Documentation Request: add guide on how to use Dependency Injection or create new providers for advanced use cases #1026

thorizer · 2017-06-07T14:43:04Z

thorizer
Jun 7, 2017

I followed the docs to setup firebase and its configuration in app.modulte.ts in my angular 4 project and it works.

But since I have 2 firebase databases for the same app and therefore 2 different configurations, setting it up in ngmodule is not an option.

I have 2 config files (environment.ts and environment2.ts)

So I tried to create a provider for each config file but it didn't work. There is no documentation on how to do that :

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { AngularFireDatabase } from 'angularfire2/database';
import { AngularFireModule } from 'angularfire2';
import { firebaseConfig } from '../../environment';

@Injectable()
export class FireProvider {
  constructor( public db: AngularFireDatabase)  {
    AngularFireModule.initializeApp(firebaseConfig);
}

 fire3(name: string) {
            var k = "/" + name;
            return (this.db.object(k));
        }
}

almothafar · 2017-06-21T03:17:51Z

almothafar
Jun 21, 2017

I believe you can have different names here:

AngularFireModule.initializeApp(firebaseConfig, 'appname1');
AngularFireModule.initializeApp(firebaseConfig2, 'appname2');

0 replies

thorizer · 2017-06-23T11:50:32Z

thorizer
Jun 23, 2017
Author

@almothafar How to call the right database in components ?
Edit : I tried it now and I think the second configuration is just overwriting the first one.

0 replies

almothafar · 2017-06-23T12:40:11Z

almothafar
Jun 23, 2017

Once you call initializeApp it will return an instance of this app (look here), use this instance to call database, like:

const app2 = AngularFireModule.initializeApp(firebaseConfig2, 'appname2');
app2.database() //

or try something "dirty" like:

const app2 = AngularFireModule.initializeApp(firebaseConfig2, 'appname2');
const db2: AngularFireDatabase = new AngularFireDatabase(app2);

I'm not on my dev machine now, but I reviewed code, I think there is an issue with AngularFire2, it seems to get the latest app to be injected here

0 replies

jamesdaniels · 2018-05-04T20:52:38Z

jamesdaniels
May 4, 2018
Maintainer

Going to leave open, for the docs, but there is now the FirebaseAppConfig and FirebaseAppName DI tokens which each module can be provided (rc7). They now use the _factory each time, rather than injecting the app, which solves the "which app is going to be injected?" issue.

0 replies

swftvsn · 2018-05-07T12:00:41Z

swftvsn
May 7, 2018

OK, trying to wrap my head around this. Please bear with me, it's a long post and any pointers are welcome.

For background our project has a bit of history, and when Firestore came available, we couldn't enable it in our project because we used datastore in the app engine side of the project. Hence we have user authentication and realtime database in project1 and firestore database in project2. We obviously authenticate the users for both projects using one login and for that we need also two Auths.

We use service classes that handle all interactions with firestore, divided per domain if the size grows too much like this:

@Injectable()
export class UserAddressService {

  constructor(
    private errorHandler: ErrorHandler,
    private firestore: AngularFirestore
  ) { }

  public async addNewPrimaryAddress(address: Address): Promise<void> {
    // compute search indexes etc.
    const batch = this.firestore.firestore.batch()
    // add all that needs to be added / updated / deleted..
    return batch.commit()
  }

}

Now, how can I differentiate to which project the injected AngularFirestore connects to? We also have plans to use third project to host data that only a back office app uses and this back office app will need to connect to all three projects, so I'm not too keen to initialize the databases over and over again in different components.

@jamesdaniels I'm extremely interested in the two (or more) modules setup mentioned in #1567 (comment) can you elaborate a bit more?

I tried to

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.project2FirebaseConfig, 'project2'),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
  ]
})
export class Project2FirebaseModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: Project2FirebaseModule,
      providers: [
        { provide: Project2FirebaseApp, useExisting: FirebaseApp },
        { provide: Project2AngularFirestore, useExisting: AngularFirestore },
        { provide: Project2AngularFireAuth, useExisting: AngularFireAuth },
        { provide: Project2AngularFireDatabase, useExisting: AngularFireDatabase }
      ]
    };
  }
}

and then later in my main module

imports: [
    Project2FirebaseModule.forRoot(),
    AngularFireModule.initializeApp(environment.project1FirebaseConfig, 'project1'),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
   ...

but no luck, it fails with this:

  | console.(anonymous function) | @ | console.js:35
-- | -- | -- | --
  | defaultLogHandler | @ | index.esm.js:77
  | push../node_modules/@firebase/logger/dist/index.esm.js.Logger.error | @ | index.esm.js:167
  | error | @ | index.cjs.js:99
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.OnlineStateTracker.logClientOfflineWarningIfNecessary | @ | index.cjs.js:13284
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.OnlineStateTracker.handleWatchStreamFailure | @ | index.cjs.js:13254
  | (anonymous) | @ | index.cjs.js:13540
  | step | @ | tslib.es6.js:91
  | (anonymous) | @ | tslib.es6.js:72
  | (anonymous) | @ | tslib.es6.js:65
  | ZoneAwarePromise | @ | zone.js:891
  | __awaiter | @ | tslib.es6.js:61
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.RemoteStore.onWatchStreamClose | @ | index.cjs.js:13536
  | (anonymous) | @ | index.cjs.js:12684
  | step | @ | tslib.es6.js:91
  | (anonymous) | @ | tslib.es6.js:72
  | (anonymous) | @ | tslib.es6.js:65
  | ZoneAwarePromise | @ | zone.js:891
  | __awaiter | @ | tslib.es6.js:61
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentStream.close | @ | index.cjs.js:12650
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentStream.handleStreamClose | @ | index.cjs.js:12787
  | (anonymous) | @ | index.cjs.js:12751
  | (anonymous) | @ | index.cjs.js:12732
  | step | @ | tslib.es6.js:91
  | (anonymous) | @ | tslib.es6.js:72
  | (anonymous) | @ | tslib.es6.js:65
  | ZoneAwarePromise | @ | zone.js:891
  | __awaiter | @ | tslib.es6.js:61
  | (anonymous) | @ | index.cjs.js:12728
  | (anonymous) | @ | index.cjs.js:12204
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | XMLHttpRequest.send (async) |   |  
  | scheduleTask | @ | zone.js:2969
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:407
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:232
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask | @ | zone.js:255
  | scheduleMacroTaskWithCurrentZone | @ | zone.js:1114
  | (anonymous) | @ | zone.js:3001
  | proto.(anonymous function) | @ | zone.js:1394
  | (anonymous) | @ | raven.js:1328
  | push../node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa | @ | index.js:65
  | Xc | @ | index.js:35
  | Yc | @ | index.js:34
  | push../node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa | @ | index.js:81
  | Vb | @ | index.js:29
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | XMLHttpRequest.send (async) |   |  
  | scheduleTask | @ | zone.js:2969
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:407
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:232
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask | @ | zone.js:255
  | scheduleMacroTaskWithCurrentZone | @ | zone.js:1114
  | (anonymous) | @ | zone.js:3001
  | proto.(anonymous function) | @ | zone.js:1394
  | (anonymous) | @ | raven.js:1328
  | push../node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa | @ | index.js:65
  | Xc | @ | index.js:35
  | Vc | @ | index.js:34
  | push../node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Qa | @ | index.js:77
  | (anonymous) | @ | index.js:33
  | wrapped | @ | raven.js:375
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:496
  | ZoneTask.invoke | @ | zone.js:485
  | timer | @ | zone.js:2054
  | setTimeout (async) |   |  
  | scheduleTask | @ | zone.js:2075
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:407
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:232
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask | @ | zone.js:255
  | scheduleMacroTaskWithCurrentZone | @ | zone.js:1114
  | (anonymous) | @ | zone.js:2090
  | proto.(anonymous function) | @ | zone.js:1394
  | (anonymous) | @ | raven.js:1097
  | Ec | @ | index.js:33
  | Fe | @ | index.js:74
  | Td | @ | index.js:82
  | Sd | @ | index.js:55
  | push../node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fb | @ | index.js:96
  | sendFn | @ | index.cjs.js:5982
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.StreamBridge.send | @ | index.cjs.js:5799
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentStream.sendRequest | @ | index.cjs.js:12613
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentListenStream.watch | @ | index.cjs.js:12829
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.RemoteStore.sendWatchRequest | @ | index.cjs.js:13476
  | (anonymous) | @ | index.cjs.js:13529
  | forEachNumber | @ | index.cjs.js:433
  | (anonymous) | @ | index.cjs.js:13528
  | step | @ | tslib.es6.js:91
  | (anonymous) | @ | tslib.es6.js:72
  | (anonymous) | @ | tslib.es6.js:65
  | ZoneAwarePromise | @ | zone.js:891
  | __awaiter | @ | tslib.es6.js:61
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.RemoteStore.onWatchStreamOpen | @ | index.cjs.js:13523
  | (anonymous) | @ | index.cjs.js:12746
  | (anonymous) | @ | index.cjs.js:12732
  | step | @ | tslib.es6.js:91
  | (anonymous) | @ | tslib.es6.js:72
  | (anonymous) | @ | tslib.es6.js:65
  | ZoneAwarePromise | @ | zone.js:891
  | __awaiter | @ | tslib.es6.js:61
  | (anonymous) | @ | index.cjs.js:12728
  | (anonymous) | @ | index.cjs.js:12204
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | ZoneTask.invoke | @ | zone.js:485
  | timer | @ | zone.js:2054
  | setTimeout (async) |   |  
  | scheduleTask | @ | zone.js:2075
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:407
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:232
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask | @ | zone.js:255
  | scheduleMacroTaskWithCurrentZone | @ | zone.js:1114
  | (anonymous) | @ | zone.js:2090
  | proto.(anonymous function) | @ | zone.js:1394
  | (anonymous) | @ | raven.js:1097
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.WebChannelConnection.openStream | @ | index.cjs.js:6067
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentListenStream.startRpc | @ | index.cjs.js:12806
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentStream.startStream | @ | index.cjs.js:12740
  | (anonymous) | @ | index.cjs.js:12703
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | ZoneTask.invoke | @ | zone.js:485
  | timer | @ | zone.js:2054
  | setTimeout (async) |   |  
  | scheduleTask | @ | zone.js:2075
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:407
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:232
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask | @ | zone.js:255
  | scheduleMacroTaskWithCurrentZone | @ | zone.js:1114
  | (anonymous) | @ | zone.js:2090
  | proto.(anonymous function) | @ | zone.js:1394
  | (anonymous) | @ | raven.js:1097
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.DelayedOperation.start | @ | index.cjs.js:12139
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.DelayedOperation.createAndSchedule | @ | index.cjs.js:12130
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.AsyncQueue.enqueueAfterDelay | @ | index.cjs.js:12242
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.ExponentialBackoff.backoffAndRun | @ | index.cjs.js:12403
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentStream.performBackoff | @ | index.cjs.js:12765
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentStream.start | @ | index.cjs.js:12561
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.RemoteStore.startWatchStream | @ | index.cjs.js:13498
  | (anonymous) | @ | index.cjs.js:13543
  | step | @ | tslib.es6.js:91
  | (anonymous) | @ | tslib.es6.js:72
  | (anonymous) | @ | tslib.es6.js:65
  | ZoneAwarePromise | @ | zone.js:891
  | __awaiter | @ | tslib.es6.js:61
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.RemoteStore.onWatchStreamClose | @ | index.cjs.js:13536
  | (anonymous) | @ | index.cjs.js:12684
  | step | @ | tslib.es6.js:91
  | (anonymous) | @ | tslib.es6.js:72
  | (anonymous) | @ | tslib.es6.js:65
  | ZoneAwarePromise | @ | zone.js:891
  | __awaiter | @ | tslib.es6.js:61
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentStream.close | @ | index.cjs.js:12650
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentStream.handleStreamClose | @ | index.cjs.js:12787
  | (anonymous) | @ | index.cjs.js:12751
  | (anonymous) | @ | index.cjs.js:12732
  | step | @ | tslib.es6.js:91
  | (anonymous) | @ | tslib.es6.js:72
  | (anonymous) | @ | tslib.es6.js:65
  | ZoneAwarePromise | @ | zone.js:891
  | __awaiter | @ | tslib.es6.js:61
  | (anonymous) | @ | index.cjs.js:12728
  | (anonymous) | @ | index.cjs.js:12204
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | XMLHttpRequest.send (async) |   |  
  | scheduleTask | @ | zone.js:2969
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:407
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:232
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask | @ | zone.js:255
  | scheduleMacroTaskWithCurrentZone | @ | zone.js:1114
  | (anonymous) | @ | zone.js:3001
  | proto.(anonymous function) | @ | zone.js:1394
  | (anonymous) | @ | raven.js:1328
  | push../node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa | @ | index.js:65
  | Xc | @ | index.js:35
  | Yc | @ | index.js:34
  | push../node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Pa | @ | index.js:81
  | Vb | @ | index.js:29
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | XMLHttpRequest.send (async) |   |  
  | scheduleTask | @ | zone.js:2969
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:407
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:232
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask | @ | zone.js:255
  | scheduleMacroTaskWithCurrentZone | @ | zone.js:1114
  | (anonymous) | @ | zone.js:3001
  | proto.(anonymous function) | @ | zone.js:1394
  | (anonymous) | @ | raven.js:1328
  | push../node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fa | @ | index.js:65
  | Xc | @ | index.js:35
  | Vc | @ | index.js:34
  | push../node_modules/@firebase/webchannel-wrapper/dist/index.js.g.Qa | @ | index.js:77
  | (anonymous) | @ | index.js:33
  | wrapped | @ | raven.js:375
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:496
  | ZoneTask.invoke | @ | zone.js:485
  | timer | @ | zone.js:2054
  | setTimeout (async) |   |  
  | scheduleTask | @ | zone.js:2075
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:407
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:232
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask | @ | zone.js:255
  | scheduleMacroTaskWithCurrentZone | @ | zone.js:1114
  | (anonymous) | @ | zone.js:2090
  | proto.(anonymous function) | @ | zone.js:1394
  | (anonymous) | @ | raven.js:1097
  | Ec | @ | index.js:33
  | Fe | @ | index.js:74
  | Td | @ | index.js:82
  | Sd | @ | index.js:55
  | push../node_modules/@firebase/webchannel-wrapper/dist/index.js.g.fb | @ | index.js:96
  | sendFn | @ | index.cjs.js:5982
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.StreamBridge.send | @ | index.cjs.js:5799
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentStream.sendRequest | @ | index.cjs.js:12613
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentListenStream.watch | @ | index.cjs.js:12829
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.RemoteStore.sendWatchRequest | @ | index.cjs.js:13476
  | (anonymous) | @ | index.cjs.js:13529
  | forEachNumber | @ | index.cjs.js:433
  | (anonymous) | @ | index.cjs.js:13528
  | step | @ | tslib.es6.js:91
  | (anonymous) | @ | tslib.es6.js:72
  | (anonymous) | @ | tslib.es6.js:65
  | ZoneAwarePromise | @ | zone.js:891
  | __awaiter | @ | tslib.es6.js:61
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.RemoteStore.onWatchStreamOpen | @ | index.cjs.js:13523
  | (anonymous) | @ | index.cjs.js:12746
  | (anonymous) | @ | index.cjs.js:12732
  | step | @ | tslib.es6.js:91
  | (anonymous) | @ | tslib.es6.js:72
  | (anonymous) | @ | tslib.es6.js:65
  | ZoneAwarePromise | @ | zone.js:891
  | __awaiter | @ | tslib.es6.js:61
  | (anonymous) | @ | index.cjs.js:12728
  | (anonymous) | @ | index.cjs.js:12204
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | ZoneTask.invoke | @ | zone.js:485
  | timer | @ | zone.js:2054
  | setTimeout (async) |   |  
  | scheduleTask | @ | zone.js:2075
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:407
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:232
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask | @ | zone.js:255
  | scheduleMacroTaskWithCurrentZone | @ | zone.js:1114
  | (anonymous) | @ | zone.js:2090
  | proto.(anonymous function) | @ | zone.js:1394
  | (anonymous) | @ | raven.js:1097
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.WebChannelConnection.openStream | @ | index.cjs.js:6067
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentListenStream.startRpc | @ | index.cjs.js:12806
  | push../node_modules/@firebase/firestore/dist/index.cjs.js.PersistentStream.startStream | @ | index.cjs.js:12740
  | (anonymous) | @ | index.cjs.js:12703
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | IndexedDB (async) |   |  
  | (anonymous) | @ | auth.js:181
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | IndexedDB (async) |   |  
  | (anonymous) | @ | auth.js:181
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | IndexedDB (async) |   |  
  | (anonymous) | @ | auth.js:181
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | IndexedDB (async) |   |  
  | (anonymous) | @ | auth.js:181
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | XMLHttpRequest.send (async) |   |  
  | scheduleTask | @ | zone.js:2969
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:407
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:232
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask | @ | zone.js:255
  | scheduleMacroTaskWithCurrentZone | @ | zone.js:1114
  | (anonymous) | @ | zone.js:3001
  | proto.(anonymous function) | @ | zone.js:1394
  | (anonymous) | @ | raven.js:1328
  | Ug | @ | auth.js:122
  | push../node_modules/@firebase/auth/dist/auth.js.xh.o | @ | auth.js:143
  | Fh | @ | auth.js:141
  | (anonymous) | @ | auth.js:147
  | z | @ | auth.js:15
  | Lh | @ | auth.js:147
  | (anonymous) | @ | auth.js:159
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | IndexedDB (async) |   |  
  | (anonymous) | @ | auth.js:181
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | IndexedDB (async) |   |  
  | (anonymous) | @ | auth.js:181
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | IndexedDB (async) |   |  
  | (anonymous) | @ | auth.js:181
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | IndexedDB (async) |   |  
  | (anonymous) | @ | auth.js:182
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | IndexedDB (async) |   |  
  | (anonymous) | @ | auth.js:181
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | IndexedDB (async) |   |  
  | (anonymous) | @ | auth.js:181
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | IndexedDB (async) |   |  
  | (anonymous) | @ | auth.js:181
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask | @ | zone.js:500
  | invokeTask | @ | zone.js:1540
  | globalZoneAwareCallback | @ | zone.js:1566
  | IndexedDB (async) |   |  
  | (anonymous) | @ | auth.js:179
  | z | @ | auth.js:15
  | Ui | @ | auth.js:179
  | Vi | @ | auth.js:180
  | push../node_modules/@firebase/auth/dist/auth.js.g.set | @ | auth.js:181
  | (anonymous) | @ | auth.js:184
  | e.g | @ | auth.js:19
  | Db | @ | auth.js:22
  | zb | @ | auth.js:22
  | push../node_modules/@firebase/auth/dist/auth.js.g.Ub | @ | auth.js:21
  | ib | @ | auth.js:15
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | (anonymous) | @ | zone.js:872
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask | @ | zone.js:421
  | push../node_modules/zone.js/dist/zone.js.Zone.runTask | @ | zone.js:188
  | drainMicroTaskQueue | @ | zone.js:595
  | Promise.then (async) |   |  
  | scheduleMicroTask | @ | zone.js:578
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:410
  | onScheduleTask | @ | zone.js:297
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask | @ | zone.js:401
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask | @ | zone.js:232
  | push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask | @ | zone.js:252
  | scheduleResolveOrReject | @ | zone.js:862
  | ZoneAwarePromise.then | @ | zone.js:962
  | push../node_modules/@angular/router/fesm5/router.js.RouterInitializer.appInitializer | @ | router.js:5435
  | push../node_modules/@angular/core/fesm5/core.js.ApplicationInitStatus.runInitializers | @ | core.js:3166
  | (anonymous) | @ | core.js:4740
  | _callAndReportToErrorHandler | @ | core.js:4883
  | (anonymous) | @ | core.js:4738
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:388
  | onInvoke | @ | core.js:4071
  | push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke | @ | zone.js:387
  | push../node_modules/zone.js/dist/zone.js.Zone.run | @ | zone.js:138
  | push../node_modules/@angular/core/fesm5/core.js.NgZone.run | @ | core.js:3927
  | push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory | @ | core.js:4727
  | ./src/main.ts | @ | main.ts:11
  | __webpack_require__ | @ | bootstrap:81
  | 0 | @ | main.ts:11
  | __webpack_require__ | @ | bootstrap:81
  | checkDeferredModules | @ | bootstrap:43
  | webpackJsonpCallback | @ | bootstrap:30
  | (anonymous) | @ | main.js:1

0 replies

swftvsn · 2018-05-07T13:08:48Z

swftvsn
May 7, 2018

I'm also ready to (help?) author documentation about this, but it's a bit hard when the best approach for this is not known to me. Maybe it's obvious, certainly I'm missing something 😄

0 replies

swftvsn · 2018-05-08T08:38:44Z

swftvsn
May 8, 2018

Ok, I'm going to go forward with this:

Given

import { Injectable } from '@angular/core'
import { AngularFireAuth } from 'angularfire2/auth'

@Injectable()
export class Project1AngularFireAuth extends AngularFireAuth { }

@Injectable()
export class Project2AngularFireAuth extends AngularFireAuth { }

You can add this to your app.module: (in the providers section)

import { NgModule, NgZone, PLATFORM_ID } from '@angular/core'

@NgModule({
  ...,
  providers: [
    ...,
    { provide: Project1AngularFireAuth, deps: [PLATFORM_ID, NgZone], useFactory: Project1AngularFireAuthFactory },
    { provide: Project2AngularFireAuth, deps: [PLATFORM_ID, NgZone], useFactory: Project2AngularFireAuthFactory },
    ...
  ],
  ...
})
export class AppModule { }

The factories are here, just functions in the app module file

export function Project1AngularFireAuthFactory(platformId: Object, zone: NgZone): Project1AngularFireAuth {
  return new Project1AngularFireAuth(environment.project1FirebaseConfig, 'project1', platformId, zone)
}
export function Project2AngularFireAuthFactory(platformId: Object, zone: NgZone): Project2AngularFireAuth {
  return new Project2AngularFireAuth(environment.project2FirebaseConfig, 'project2', platformId, zone)
}

And finally, now you can inject, anywhere be it component or service, the services as you would like to:

@Injectable()
export class SuperService {
  constructor(private auth1: Project1AngularFireAuth, private auth2: Project2AngularFireAuth) {}
}

0 replies

joel1725 · 2019-05-09T14:22:36Z

joel1725
May 9, 2019

@swftvsn can you share your project, so I can use it to complete mine ... I have tried to use multiple Firestore database projects in the same ionic application, but I do not get it completly, I do not understand so much how firebase and angular are integrated to make this work.

0 replies

swftvsn · 2019-05-09T14:38:15Z

swftvsn
May 9, 2019

Unfortunately I can't do that easily. And just my 2c, we ditched ionic in the end favoring native android and ios apps as cordova is really limiting. Wish we would have moved sooner.

Next up: flutter?

0 replies

joel1725 · 2019-05-09T15:13:16Z

joel1725
May 9, 2019

I understand, it seems that this is a problem that has not been paid much attention to be solved, I hope in the future it has a solution. While I think I should find a way to turn it around. In my case, I may migrate to React Native in the future. Thank you.

0 replies

todosybuenrollo · 2022-09-09T21:22:29Z

todosybuenrollo
Sep 9, 2022

The factories are here, just functions in the app module file

export function Project1AngularFireAuthFactory(platformId: Object, zone: NgZone): Project1AngularFireAuth {
  return new Project1AngularFireAuth(environment.project1FirebaseConfig, 'project1', platformId, zone)
}
export function Project2AngularFireAuthFactory(platformId: Object, zone: NgZone): Project2AngularFireAuth {
  return new Project2AngularFireAuth(environment.project2FirebaseConfig, 'project2', platformId, zone)
}

And finally, now you can inject, anywhere be it component or service, the services as you would like to:

@Injectable()
export class SuperService {
  constructor(private auth1: Project1AngularFireAuth, private auth2: Project2AngularFireAuth) {}
}

@swftvsn
This seems good but today, the new AngularFireAuth(...) function has 12 arguments instead of 4, how do we should fill all the new arguments? Same issue with AngularFireDatabase, AngularFirestore, etc all of them request more than 10 arguments to be created.

I like your first attempt because you was trying to do it without create elements that has been created automatically by the module without more complexity, but it doesn't work.

In my opinion, if the initialization of the module is: AngularFireModule.initializeApp($MyFirebaseConfig, $MyFirebaseName) I can't believe there isn't some way to inject AngularFireAuth or any other submodule (AngularFireDatabase, AngularFirestore, etc) selecting it by that name $MyFirebaseName.

Something like that @Inject('$MyFirebaseName') private myAngularFireAuthName: AngularFireAuth in the constructor. (It must be mandatory expecify the injection name if you use a name.) It should be really easy to use.

Or maybe something like { provide: AngularFireAuth , useValue: $MyFirebaseName } (but in this second option, I do not know clear how whe can use more than one of it in the same module)

Why do we want that parameter name in all components constructors if it can't be used later?

A lot of thanks in advance @swftvsn for all you rcontributons about it.

0 replies

todosybuenrollo · 2022-09-10T06:44:12Z

todosybuenrollo
Sep 10, 2022

I found today that from version 7 you can do something like this:

@NgModule({
    imports: [
        provideFirebaseApp(() => initializeApp(config)), // default app
        provideFirebaseApp(() => initializeApp(config2, 'app2')),
        provideFirebaseApp(() => initializeApp(config3, 'app3')),
        provideAuth(() => getAuth()), // from default app
        provideAuth(() => getAuth(getApp('app2'))),
        provideAuth(() => getAuth(getApp('app3'))),
    ],
})

import { FirebaseApp, FirebaseApps } from '@angular/fire/app';
import { Auth, AuthInstances } from '@angular/fire/auth';

export class Foo {
    constructor(
        defaultApp: FirebaseApp,       // Injects the default FirebaseApp
        allFirebaseApps: FirebaseApps, // Injects an array of all initialized Firebase Apps
        auth: Auth,                      // Injects the default auth instance
        authInstances: AuthInstances, // Injects an array of all the intialized auth instances
    ) { }
}

But now my issue is, how can I find in authInstances: AuthInstances my app2 or app3 by name from easy way? I know that I can do go foreach one and check if name is equal to app2 for example. In my classes im going to add things like this per each component:

private authMap: Map<string,Auth>;
constructor(private authInstances: AuthInstances) {
    this.authInstances.forEach(auth => {
        this.authMap.set(auth.name,auth);
    });
}

But I think that your injection should work with maps or with something that can be select the injection by name.

Another important thing, is that you must declare a default app, if not the AuthInstaces fail because default app is not initializate and then to find this default app is so ugly name: "[DEFAULT]"

To finish, you cannot import only one auth if your auth is not default, because you have a way to import default and to import an array with default and another auths. Is there a way to inject auth: Auth by name and avoid import all the array?

2 replies

yonner Oct 25, 2022

@todosybuenrollo

I like your code example of retrieving the Auth array from the firebase instances "private authInstances: AuthInstances", I know this question isnt directly related to your issue but I was wondering how to convert the "Auth" objects stored in the map into AngulerFireAuth classes such that I can call methods such like ".signInWithPopup" etc.. What I am trying to do is to have my angular project be dynamically switchable so that I can sign in to different Firebase auth projects within the same app.

swftvsn Oct 25, 2022

Maybe my and @todosybuenrollo 's approaches can be combined? What if the factory in my example would inject AuthInstances and provide the correct one in each case? Then you could inject a named Auth as in my example.

I don't know if it works, as haven't tested, but

import { NgModule, NgZone, PLATFORM_ID } from '@angular/core'

@NgModule({
  ...,
  providers: [
    ...,
    { provide: Project1AngularFireAuth, deps: [AuthInstances], useFactory: Project1AngularFireAuthFactory },
    { provide: Project2AngularFireAuth, deps: [AuthInstances], useFactory: Project2AngularFireAuthFactory },
    ...
  ],
  ...
})
export class AppModule { }

and in the factory something like

export function Project1AngularFireAuthFactory(authInstances: AuthInstances): Project1AngularFireAuth {
  return authInstances.find(a.name === 'name1')
}
export function Project2AngularFireAuthFactory(authInstances: AuthInstances): Project2AngularFireAuth {
  return authInstances.find(a.name === 'name2')
}

This essentially would only create a named interface for specific instance so that it can be injected more easily.

swftvsn · 2022-10-25T14:30:10Z

swftvsn
Oct 25, 2022

If you're looking for switching the active firebase app/auth/firestore etc, then I'd go with provider.

export class AuthProvider {
  activeProject: string
  constructor(private authInstances: AuthInstances) {}
  public get currentAuth(): Auth {
    return this. authInstances.find(a.name === activeProject)
  }
}

This way one could dynamically change the project that is active and not worry about that in component classes. If you combine that with Observabes, then you'd have AuthProvider have currentAuthObservable(): Observable<Auth>. Then it would be simply a next() call to the backing subject to change the active app/auth/firestore. (And inject the provider to component class, and base any action on listening to the currentAuth|Firestore|FunctionObservable.)

9 replies

yonner Oct 25, 2022

Yes I know but all the auth methods I want to use are in AngularFireAuth which is in import { AngularFireAuth } from '@angular/fire/compat/auth'; like .signInWithEmailAndPassword() or signInWithPopup(). How do I convert the Auth object from import { Auth, AuthInstances } from '@angular/fire/auth'; returned from the currentAuth() into a AngularFireAuth so I can call these methods using the correct project values.

swftvsn Oct 25, 2022

Ah, ok, so in new parlance I believe it's

import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth'

 return signInWithEmailAndPassword(auth, email, pass)

swftvsn Oct 25, 2022

Everything is just a function.

yonner Oct 25, 2022

Thank you so much for the help @swftvsn

Ah didnt realise those existed within the import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth' it self. Is there any documentation on using these methods instead of AngularFireAuth to do authorization? Also are there any downsides to using these methods from the '@angular/fire/auth'?

swftvsn Oct 25, 2022

That is the new more efficient way to use Firebase. I think all the methods are exactly as in raw Firebase, just returning observables. So head to https://firebase.google.com/docs/auth/web/password-auth and take a look at the version 9 docs.

Documentation Request: add guide on how to use Dependency Injection or create new providers for advanced use cases #1026

Replies: 13 comments · 11 replies

thorizer Jun 23, 2017 Author

jamesdaniels May 4, 2018 Maintainer

Replies: 13 comments 11 replies

thorizer
Jun 23, 2017
Author

jamesdaniels
May 4, 2018
Maintainer