Adding AngularfireAnalytics causes Callable Firebase Functions to fail

[nikmartin]

I'm using Angularfire 5.4.2, firebase 7.9.3 and Angular 7.2.1 in an ionic project. The ionic project has been working fine until we decided to use Angularfire Analytics. After simply loading it into app.module.ts, now any callable function fails with an error about being unable to load firebase-messaging-sw.js. We don't load firebase messaging, as we use the native capacitor push notifications plugin. The error we get when calling a callable function is:

UserService :: drivers available error:  FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:4200/firebase-cloud-messaging-push-scope') with script ('http://localhost:4200/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration).
    at WindowController.<anonymous> (http://localhost:4200/vendor.js:113991:45)

We routinely run and test in the browser, and have guards around any code that needs to be run in the capacitor runtime. The app DOES seem to run ok on a device, but we haven't gotten far enough in the browser yet to get to any real device testing for actually logging analytics events

I tried to setup a stackblitz repo, but using the provided template, simply adding analytics to app.module.ts there causes a totally separate error that I've added to another issue #2464

https://stackblitz.com/edit/angular-fire-start-m9eqpr?file=app%2Fapp.module.ts Is a fork of the Angularfire stackblitz template replicating the error in loading the analog module

[nikmartin]

After debugging this for a LONG time this morning, I have a bit more information. The actual error is manifested when adding appId: to the firebase config. Once that happens, firebase attempts to load firebase-messaging-sw.js, which doesn't exist in my project, as it's not a PWA. It does run on the web, but doesn't receive push notifications when running on the web.

[nikmartin]

More Info: adding a simple firebase-messaging-sw.js allows callables to run, but I don't know the repercussions of initializing firebase inside the service worker AND inside app.module.ts.

[nikmartin]

Still more info: I removed everything from firebase-messaging-sw.js except for a console.log and everything still works fine, it literally just needs to find that file for some reason once you add appId to your firebase config.

[jamesdaniels]

Weird, I know the JS SDK made a breaking change on accident here that affected other parts of the SDK. Maybe try upgrading? If you're still able to repo, please open an issue over there as that sounds well clear of AngularFire https://github.com/firebase/firebase-js-sdk.

Thanks for digging into this.

[javebratt]

This just happened to me, the issue helped me fix it, but just as a heads up, it looks like yeah, when we use AngularFire to call callable functions, it tries to find the firebase-messaging-sw.js file first. If it's not there, it throws 404 and doesn't complete the function.

[askilondz]

This is currently happening for me as well. firebase 7.24.0 @angular/fire: 6.0.3

[satyajiit]

Same here.

[BianchiSeb]

same here fixed it by updating package.json with :

"firebase": "^8.0.0",
"@angular/fire": "^6.0.4",

I also deleted the ngcc package lock file in path : /node_modules/@angular/compiler-cli/ngcc/src/

[Justinohallo]

This is happening to me as well. Adding the blank firebase-messaging-sw.js did not fix the issue.

[Justinohallo]

Ok, I fixed it by addressing the importing of Firebase throughout my app.

// This import loads the firebase namespace along with all its type information. import firebase from 'firebase/app';

// These imports load individual services into the firebase namespace. import 'firebase/auth'; import 'firebase/database';

I was able to remove the firebase-messaging-sw.js file and all onCall functions are working properly.

I previously had a mix of:

import firebase from 'firebase;

import * as firebase from 'firebase'

Standardizing everything to import firebase from 'firebase/app' + the subsequent packages you need import 'firebase/functions'

Everything works now.