angularfire: Bug: Observable returned from AngularFireFunctions does not trigger change detection

Version info

Angular CLI: 9.1.1
Node: 12.12.0
OS: win32 x64

Angular: 9.1.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@angular/cdk                      9.2.1
@angular/cli                      9.1.1
@angular/fire                     6.0.0
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.2.1
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

How to reproduce these conditions

Failing test unit, Plunkr, or JSFiddle demonstrating the problem I deployed the issue here https://mc-changelogger.web.app/

Steps to set up and reproduce Continue using a functions observable like here https://github.com/Isigiel/changelogger2/blob/master/src/app/services/technic-api.service.ts#L29

To reproduce: Open https://mc-changelogger.web.app/ Enter http://api.technicpack.net/modpack/shivaxi-rlcraft and wait for 10 seconds Observe how the progress bar keeps going and there is no error displayed If you now trigger change detection by clicking on the button or on another step, you will see that the UI updates suddenly happen

Sample data and security rules

Debug output

** Errors in the JavaScript console **

** Output from firebase.database().enableLogging(true); **

No relevant output

Expected behavior

I expect any observable to trigger angular change detection.

Actual behavior

I’m assuming due to https://github.com/angular/angularfire/blob/master/src/functions/functions.ts#L43 the observables returned by the functions are running outside of the angular zone and thus not triggering changeDetcteion properly.

Suggested Fix

Make sure the Observable actually run inside angular or at least state very explicitly that they have very unexpected behavior and provide a workaround for people who want to use them.

Hint

Although I’m not sure about the current situation I have seen similar behavior with the authentication part of this library

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 5
Comments: 15 (1 by maintainers)

Commits related to this issue

WIP - mucking around trying to angularfire to work I think im suffering from this https://github.com/angular/angularfire/issues/2414 — committed to Dazza666/ngx-admin by Dazza666 4 years ago

Most upvoted comments

I’ve settled on a simple enough workaround based on the comment from @mmorandini manually call detectChanges in a finalize.

someObservable: Observable<Type> = 
    this.fireFunctions.httpsCallable('funcName')
        ({..})
            .pipe(finalize(() => 
                    this.changeDetectorRef.detectChanges()));

Then, you can use {someObservable | async} in your view.

Hopefully the root issue will be fixed, and to revert the workaround, simply remove the finalize pipe.

k- on May 11, 2020

hello, i return promise this.aFunctions.httpsCallable('createBackendUser')(users).toPromise() Work for me

carminemilieni on May 13, 2020

I want to subscribe to observable with “|async” directly in view. So based on suggestions above this works for me:

this.value$ = fromPromise(fns.httpsCallable(‘test’)(null).toPromise());

matjazonline on May 24, 2020

Hi, I am having the exact same issue here. Having to call changeDetectorRef.detectChanges() to force change detection;

Surely this cannot be the expected behavior?

mmorandini on Apr 22, 2020