FirebaseAnalytics.initializeFirebase is not a function on a vanilla angular project

[mic345]

Describe the bug

Starting an angular vanilla project with firebase-analytics throws a initializeFirebase is not a function error. Note that Firebase itself does work (the default events), as can be seen on the xcode console and on firebase analytics debug steam.

To Reproduce

1. run the following script

   project_name="ABC"
   project_id="com.company.abc"
   ionic start "$project_name" "sidemenu" --type="angular" --project-id="$project_id" --package-id="$project_id" --capacitor --no-interactive
   cd "$project_id"
   yarn add "@capacitor-community/firebase-analytics"
   mkdir www && touch www/index.html
   sudo gem install cocoapods
   ionic cap add "ios"
   ionic cap sync

2. Add GoogleService-Info.plist via xcode
3. Add imports and FirebaseAnalytics.initializeFirebase per the code examples with the correct init options taken from GoogleService-Info.plist (btw, why do we need this data duplicity -- it's bug prone).

Bug

The following error appears on xcode console:

[error] - ERROR Error: Uncaught (in promise): TypeError: Z.initializeFirebase is not a function. (In 'Z.initializeFirebase(...)', 'Z.initializeFirebase' is undefined)

Expected behavior

Not to have an error.

Smartphone

• Device: emulator iphone 8 and real iphone 8.
• OS: iOS 13.7

[j--w]

I think you should only call initializeFirebase if you're running in the web platform. If you look at the example that's what they've done:

https://github.com/priyankpat/capacitor-plugins-example/blob/firebase-analytics/src/App.tsx#L38

[mic345]

Hi JW and thanks for the feedback 👍

If we don't call FirebaseAnalytics.initializeFirebase we are getting the following error:

[error] - ERROR Error: Uncaught (in promise): Firebase analytics is not initialized. Make sure initializeFirebase() is called once

I think it is thrown from the various functions on /dist/esm/web.js when this.analyticsRef was not initialized.

Do you have any other idea what we may be doing wrong? Do you know of anyone else using this plugin while using capacitor+angular?

Take care and thanks for the help! mic.

[mic345]

OK, we were able to overcome this issue by using this as a working example for our prototype.

The problem occurs if you call FirebaseAnalytics.initializeFirebase from within AppComponent.initializeApp() (as we did on our initial prototype). I would guess the call is too early and something is not loaded yet, but I may be wrong. I'm still not sure why this function is needed if the plugin can read the information from the plist file, but so be it. If you decide to keep it, I'd check why the race condition happens.

In an case, many thanks for all the help here 🙏 mic.

[j--w]

Sorry, I don't think I was clear with what I was suggesting, I end up doing:

import "@capacitor-community/firebase-analytics";
import { Plugins } from "@capacitor/core";

const { FirebaseAnalytics, Device } = Plugins;
const deviceInfo = Device.getInfo();

// bunch of other stuff, call this when my app bootstraps
  if ((await deviceInfo).platform === "web") {
    FirebaseAnalytics.initializeFirebase(firebaseConfig);
  }

For ios and android it works from the plist and google-services.json without any extra JS code but I need this for local debugging and the web version.

If you look at the example you posted, it's doing the same thing, the deviceinfo stuff is the important part.

[mic345]

Hi Jim and thanks for the feedback!

Sorry, I don't think I was clear with what I was suggesting, I end up doing: ...

When we tried doing it from within AppComponent.initializeApp() on our prototype, we've got the error FirebaseAnalytics.initializeFirebase is not a function. When we moved the same code to a service it was working. My guess this is some kind of a race condition, maybe even on the device plugin. Anyway within a service it works fine on all our tests.

For ios and android it works from the plist and google-services.json without any extra JS code

That's terrific than! Maybe it's worth dropping a comment about it right inside the usage section, next to the function. This way people who just use the example on the front page wont worry about the manual configuration.

Anyway, many thanks for all the help as well as the plugin 🙏 mic.

[sneko]

Hi,

Had also the error:

File: http://localhost/js/chunk-vendors.8a3c126f.js - Line 1626 - Msg: Firebase analytics is not initialized. Make sure initializeFirebase() is called once

I found the documentation very misleading about https://github.com/capacitor-community/firebase-analytics#migration letting me think no add(FirebaseAnalytics.class); was required to work on Android. But it is.

As pointed by @mic345 , follow https://devdactic.com/firebase-analytics-ionic/ to prevent wasting time, the steps are pretty clear! 😄