Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Jan 31 2019 22:01
    fmandres92 commented #1904
  • Jan 31 2019 10:47
    rsRamgharia commented #1781
  • Jan 31 2019 07:15
    rsRamgharia commented #1015
  • Jan 31 2019 07:15
    rsRamgharia commented #1015
  • Jan 29 2019 17:48
    Jemonge commented #1938
  • Jan 29 2019 17:47
    Jemonge commented #1938
  • Jan 29 2019 09:23
    L96Github commented #1687
  • Jan 28 2019 10:17
    webdevelopland commented #1993
  • Jan 28 2019 09:58
    webdevelopland commented #1993
  • Jan 27 2019 22:26
    thefliik commented #1999
  • Jan 27 2019 22:25
    thefliik closed #1999
  • Jan 27 2019 22:25
    thefliik commented #1999
  • Jan 27 2019 22:07
    thefliik edited #1999
  • Jan 27 2019 22:04
    thefliik opened #1999
  • Jan 27 2019 10:16
    akashjadhav1221 closed #1997
  • Jan 26 2019 20:58
    jymdman commented #1983
  • Jan 26 2019 20:15
    skotturi commented #1808
  • Jan 26 2019 20:12
    skotturi commented #1808
  • Jan 26 2019 20:09
    skotturi commented #1808
  • Jan 26 2019 13:48
    jymdman commented #1983
Karmasakshi Goyal
Screenshot 2020-07-30 at 7.37.51 PM.png
I see JS event listeners count increasing infinitely on all my AngularFire projects. You might want to check yours too.
Manuel Bojato
Quick question: If I want to listen to any doc change at my collection, snapshotChanges() should be the way to go?
For example, my teams collection has six teams, one of those changes a field (i.e. description), so I want to listen to any document change to update my teams array later on
I have been testing it along with stateChanges() but seems to not trigger on doc field changes :(
@KingDarBoja you could use snapshotChanges() and that will get you the data along with a lot of metadata, or you could use valueChanges({ idField: 'id' }) on the collection to get the doc data along with the doc.id
Manuel Bojato
Yeah but does those methods listen to any field change of any document at the collection ?
Looks like something weird is happening and I am not able to get the updated documents on field changes while listening to my collection
Yes - anytime something changes on the DB (collection) snapshotChanges or valueChanges should pick up on it. Please create a stackblitz for your issue and I’ll review
Are you using Cloud Firestore or Realtime Database?
In the meantime, console.log within your valueChanges, go to your Firebase console and manually update a field on one of the docs and see what that log says
It may be that you aren’t updating the property that is feeding the view?
Manuel Bojato
Cloud Firestore
I am running my Angular App connected to both firestore functions and Cloud firestore emulators
So far the firestore and cloud functions are connected locally
switch (currentUserRole) {
      case RolesEnum.ADMIN:
        console.log('ADMIN CALL');
        return col.snapshotChanges();
        console.log('NOT ADMIN CALL');
        const queries = userTeamIds
          .map((id) => {
            return this.db.collection<Team>('teams', (ref: CollectionReference) => {
              return ref.where(firebase.firestore.FieldPath.documentId(), '==', id);
            }).snapshotChanges().pipe(map(s => {
              return s[0];
        return combineLatest(queries);
I am doing something like this, because I added some security rules for any user that is not an Admin
However, the snapshot changes (even if I pipe it and log using tap rxjs operator) doesn't show any changes if I go and edit a document field on my teams collection
The previous code is inside a function, which returns a Observable<DocumentChangeAction<Team>>, so I subscribed two arrow functions (onSuccess and onFailure) to see what's going on
Manuel Bojato
I found the issue
I had this: this.db.collection<Team>('teams', (ref: CollectionReference) => ref.orderBy('updated_at', 'desc')); but if any document HAS NO the field, RIP snapshotChanges D:
Manuel Bojato
Also, I switched to stateChanges as I wanted to listen to document changes :P
@KingDarBoja Ok, also, looks like you're using the native Firebase SDK i.e. where(firebase.firestore.FieldPath.documentId(), ... versus AngularFire?
Manuel Bojato
Oh yeah
Because I added some security rules, however, I need to find certain documents by its id
And listen for those changes, however, angularfire doc() methods like snapshotChanges() will always retrieve the type as value.
This might be useful when you're dealing with firebase security rules and only want to query for the records you're allowed to access.
So yeah, the main reason why I used firebase.firestore.FieldPath.documentId() on my where clause
Any other alternative with angularfire?
Manuel Bojato
I tried ref.where('__name__', '==', teamId) and works too
@KingDarBoja I try to stick with one API - Angular Fire, versus importing both.
Manuel Bojato
I know but there weren't any other ways to do what I wanted
because I added the security rules to some collection and based on user role, you can get certain docs
Without mention that doc().snapshotChanges() has the above bug of always giving back type: "value" instead of added | modified | removed as stated on angularfire docs
Richard Sithole

Hi there

I have an async function which I would like to convert to an Observable stream (using rxjs operators). The await calls must execute in the order they appear in the function.

async authenticateUser(profile: Profile): Promise<any> {

  let authCookie: any;

   try {

         authCookie = await getCookie();

    } catch (error) {



   if (!authCookie || authCookie?.length < 1) {


            throw {message: "login failed", status: -2};


    await saveProfileAsync(profile);

    await storeCurrentAuthCookieAsync(authCookie);


    await setPartitionSessionCookie(profile.url, authCookie);


Is there a clean way to accomplish the above?

jagdishsinh jadeja
why dont angularfire come to angular official on discord ?
Manuel Bojato
One of the angularfire members is already there ;)
I recommend joining the Angular server as well
Russel Porosky
Aloha! I’m doing something wrong I think - I have a an HTTP triggered function on Firebase that I want to call from my Angular app, but no matter what combination of cors stuff I throw in the function, I am always getting “Same Origin Policy” error messages from the app when trying to reach out to it :( I’ve verified as much as I can (function exists on Firebase, URL matches on both ends, logs show the deployment), but no request ever reaches it.
Takeshi Daveau

I'm trying to update an app and a home made library from angular 8.2 to angular 11.x.
My lib is in charge of authentication management which is based on Firebase Authentication.
Then I import this lib in my AppModule to manage the auth part, but I also use AngularFireDatabaseModule in this app.

Here is the app.module.ts

import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { BrowserModule, BrowserTransferStateModule, Title } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LibCoreModule, ConfigService } from 'my-lib';
import { get } from 'lodash';
import { IntercomModule } from 'ng-intercom';

import { environment } from '../environments/environment';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { APP_CONFIG, APP_DI_CONFIG } from './app.config';
import { CgvModule } from './cgv';
import { CoreModule } from './core';
import { BrowserStateInterceptor } from './core/browserstate.interceptor';
import { CourseStatusResolver } from './core/service';
import { NotFoundComponent } from './not-found/not-found.component';
import { SharedModule } from './shared';
import { UrlRewritingComponent } from './url-rewriting/url-rewriting.component';

  declarations: [AppComponent, UrlRewritingComponent, NotFoundComponent],
  imports: [
      apiBase: environment.apiBase,
      apiUrl: environment.apiUrl,
      apiVersion: environment.apiVersion,
      byPassAuth: false,
      configUrl: `${environment.apiUrl}/${environment.apiBase}/${environment.apiVersion}/config`,
      constantUrl: null,
      ssrMock: environment.ssrMock,
      error: {
        '401Redirect': null,
        '502Redirect': null
    BrowserModule.withServerTransition({ appId: 'my-app' }),
      appId: environment.intercom, // from your Intercom config
      updateOnRouterChange: true, // will automatically run `update` on router event changes. Default: `false`
      alignment: 'right'
  providers: [
      provide: APP_CONFIG,
      useValue: APP_DI_CONFIG
      provide: HTTP_INTERCEPTORS,
      useClass: BrowserStateInterceptor,
      multi: true
  bootstrap: [AppComponent]
export class AppModule {}
And lib-core.module.ts (main module of my library) :
import { CommonModule } from '@angular/common';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';

import { AuthInterceptor } from './interceptors/auth.interceptor';
import { ErrorInterceptor } from './interceptors/error.interceptor';
import { LoaderInterceptor } from './interceptors/loader.interceptor';
import { ApiConfig } from './models/api-config.model';
import { AuthGuard } from './service/auth.guard';
import { InitializerService, load } from './service/initializer.service';

/** Http interceptor providers in outside-in order */

const httpInterceptorProviders = [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true }

  imports: [
      isolate: true
  providers: [
      provide: APP_INITIALIZER,
      useFactory: load,
      deps: [InitializerService],
      multi: true
export class LibCoreModule {
  static forRoot(config: ApiConfig): ModuleWithProviders<LibCoreModule> {
    return {
      ngModule: LibCoreModule,
      providers: [{ provide: ApiConfig, useValue: config }]
  constructor() {}

Everything is compiling (without ivy enabled), but I got this error :

core.js:10756 Uncaught NullInjectorError: StaticInjectorError(AppModule)[InjectionToken angularfire2.app.options]: 
  StaticInjectorError(Platform: core)[InjectionToken angularfire2.app.options]: 
    NullInjectorError: No provider for InjectionToken angularfire2.app.options!
    at NullInjector.get (http://localhost/vendor.js:48236:21)
    at resolveToken (http://localhost/vendor.js:49192:20)
    at tryResolveToken (http://localhost/vendor.js:49129:12)
    at StaticInjector.get (http://localhost/vendor.js:49002:16)
    at resolveToken (http://localhost/vendor.js:49192:20)
    at tryResolveToken (http://localhost/vendor.js:49129:12)
    at StaticInjector.get (http://localhost/vendor.js:49002:16)
    at resolveNgModuleDep (http://localhost/vendor.js:63552:25)
    at NgModuleRef_.get (http://localhost/vendor.js:64382:14)
    at injectInjectorOnly (http://localhost/vendor.js:37859:29)

I've read plenty of stackoverflow, issues about this error, but nothing seems related to this problem, as it's always a lack of AngularFireModule.initializeApp(environment.firebase) or bad usage of the lib.

I alos tried to add AngularFireModule.initializeApp(environment.firebase) inside LibCoreModule in addition fo the one in AppModule, or add it only on my lib. I always get the same error
Takeshi Daveau
After some test this is the usage of AngularFireAuth inside my lib which cause the error message
Takeshi Daveau
So at the end I left Angularfire, and use the native firebase object. I think it should be nice to explain how to build a lib that is based on Angularfire2