TypeError: m.Z.analytics is not a function

Issue

This Content is from Stack Overflow. Question asked by MrMik

After trying and searching for hours, I’m now asking for your support.

I’ve updated to Angular v14, AngularFire 7 and Firebase 9.
Here is my package.json:

"dependencies": {
"@angular-devkit/build-angular": "^14.2.3",
"@angular/animations": "^14.2.2",
"@angular/cdk": "^14.2.2",
"@angular/common": "^14.2.2",
"@angular/core": "^14.2.2",
"@angular/fire": "^7.4.1",
"firebase": "^9.10.0",
"@angular/cli": "^14.2.3",
"@angular/compiler": "^14.2.2",
"@angular/compiler-cli": "^14.2.2",

The following errors are now showing up:

    ERROR Error: Uncaught (in promise): TypeError: m.Z.analytics is not a function
TypeError: m.Z.analytics is not a function
    at main.js:1:482341
    at Generator.next (<anonymous>)
    at r (main.js:1:943202)
    at ne (main.js:1:943409)
    at main.js:1:943470
    at new b (polyfills.js:1:118001)
    at main.js:1:943348
    at $.init (main.js:1:482452)
    at main.js:1:595578
    at T.invoke (polyfills.js:1:106778)
    at xe (polyfills.js:1:116909)
    at polyfills.js:1:115947
    at polyfills.js:1:116053
    at r (main.js:1:943238)
    at ne (main.js:1:943409)
    at main.js:1:943470
    at new b (polyfills.js:1:118001)
    at main.js:1:943348
    at $.init (main.js:1:482452)
    at main.js:1:595578

and

    main.js:1 ERROR Error: Uncaught (in promise): TypeError: J.Z.auth is not a function
TypeError: J.Z.auth is not a function
    at main.js:1:596299
    at Generator.next (<anonymous>)
    at r (main.js:1:943202)
    at ne (main.js:1:943409)
    at main.js:1:943470
    at new b (polyfills.js:1:118001)
    at main.js:1:943348
    at _.handleAccess (main.js:1:596455)
    at _.intercept (main.js:1:596146)
    at lt.handle (main.js:1:661621)
    at xe (polyfills.js:1:116909)
    at xe (polyfills.js:1:116416)
    at polyfills.js:1:117780
    at T.invokeTask (polyfills.js:1:107464)
    at Object.onInvokeTask (main.js:1:753014)
    at T.invokeTask (polyfills.js:1:107385)
    at T.runTask (polyfills.js:1:102487)
    at fe (polyfills.js:1:109884)

I’ve already tried removing and re-adding all packages by deleting node_modules and package.lock.json and running npm install again.

My app.module.ts looks like this:

@NgModule({
declarations: [AppComponent],
imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireAuthModule,
    AngularFireAnalyticsModule,
    AngularFireMessagingModule,

And in my auth.service.ts (from where the error comes from), I use Firebase and AngularFire as follows:

import { AngularFireAuth } from "@angular/fire/compat/auth";
import firebase from 'firebase/compat/app';
import { EmailAuthProvider, reauthenticateWithCredential } from 'firebase/auth';

@Injectable({
  providedIn: "root"
})
export class AuthService {
  public fireUser?: firebase.User;

constructor(
public readonly auth: AngularFireAuth,
    
....

if (firebase.auth) {
  this.auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL);
}


public async signInWithGuest(): Promise<firebase.auth.UserCredential> {
    return await this.auth.signInAnonymously();
 }

....

And why does it only tell me “m.Z.analytics”, is there any way to get this error message more detailed?

Would appreciate every advice and help.



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?