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
Manuel Bojato
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
Tom Schall
does anybody know how to update just a single field in a map without repalcing the whole map in firestore?
ok i got it. you have to use set() with merge instead of update()
Russel Porosky
Aloha :) On a brand new project, after ng add @angularfire/fire and firebase init, when I try to start the Firestore emulator (specifically - all the other ones appear to work fine), I get an error
The core dump says Internal Error and has the message Error: ShouldNotReachHere() :D
Anyone seen this before? I can’t find much info online :(
I’m on an M1 Mac with Big Sur and using OpenJDK 64-bit 16.0.1
Omar Hassan
ng deploy not working with Github Actions also after set firebase token in secrets
Timothy Alcaide
Hi ! How to use angular interceptor with firebase request ?
Jakub Keller
Angular 13 + @angular\fire 7 with SSR not meshing very well...
Unless someone has a workaround, looks like it has to do with this specifically, "IDBIndex is not defined"
Jakub Keller
Nm fixed it.
This is why I never frequent gitter lol
Hello guys,