TypeError: m.Z.analytics is not a function

Question

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 ()
    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 ()
    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 {
    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.

TypeError: m.Z.analytics is not a function

0 Answers