Angular Firebase应用因AngularFireAuthModule内存泄漏崩溃，求临时解决方案

The Issue #

I’ve tracked down a severe memory leak in AngularFireAuthModule (part of @angular/fire/auth) that causes Chrome tabs to crash after prolonged runtime (around 20 hours). Here’s what I’ve confirmed:

• Versions in use: Updated to latest via ncu -u: @angular/fire": "^5.2.3", firebase": "^7.5.0"
• Reproduction: Even a minimal app (only rendering "hello world") exhibits the leak when AngularFireAuth is injected (whether in a component or service)
• Key Symptoms:
  • JS memory grows at ~11 KB/s (monitor via Chrome Task Manager: CTRL+ESC)
  • After 10 hours, memory usage hits ~800MB (with a total footprint of ~1.6GB), leading to tab crashes
  • Chrome Performance panel shows 2 new listeners added per second, directly correlating with JS heap growth
• Leak Trigger Code:

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'memoryleak';
  constructor(public auth: AngularFireAuth){ }
}

I’ve already filed a GitHub issue for this, as it appears to be a bug in the FirebaseAuth implementation.

Temporary Fix: Switch to Custom localStorage-based Persistence #

Since you don’t need cross-tab session sync, we can bypass the problematic default IndexedDB persistence by using localStorage instead. This eliminates the excessive listener growth that’s causing the memory leak. Here’s how to implement it:

Step 1: Create a Custom Persistence Service #

This service implements Firebase’s auth persistence interface using localStorage:

import { Injectable } from '@angular/core';
import { firebase } from '@firebase/app';
import { AuthPersistence } from '@firebase/auth-types';

@Injectable({ providedIn: 'root' })
export class LocalStorageAuthPersistence implements AuthPersistence {
  readonly type = 'LOCAL' as const;

  async get(key: string): Promise<string | null> {
    return Promise.resolve(localStorage.getItem(key));
  }

  async set(key: string, value: string): Promise<void> {
    localStorage.setItem(key, value);
    return Promise.resolve();
  }

  async remove(key: string): Promise<void> {
    localStorage.removeItem(key);
    return Promise.resolve();
  }

  async clear(): Promise<void> {
    localStorage.clear();
    return Promise.resolve();
  }
}

Step 2: Register & Set Default Persistence #

Update your Firebase module to register the custom persistence and set it as the default:

import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';
import { LocalStorageAuthPersistence } from './local-storage-auth-persistence.service';
import * as firebase from 'firebase/app';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
  ],
  providers: [LocalStorageAuthPersistence]
})
export class FirebaseConfigModule {
  constructor(private customPersistence: LocalStorageAuthPersistence) {
    // Register our custom localStorage-based persistence
    firebase.auth().registerPersistence(this.customPersistence);
    // Set it as the default persistence for auth
    firebase.auth().setPersistence(this.customPersistence.type);
  }
}

Why This Works #

The default Firebase Auth persistence uses IndexedDB, which in older versions (like 7.5.0) sets up persistent listeners that aren’t properly cleaned up over time. By switching to localStorage, we avoid these listener leaks entirely, keeping memory usage stable even after 20+ hours of runtime.

This is a temporary workaround until the upstream Firebase/AngularFire bug is fixed.

内容的提问来源于stack exchange，提问作者TSR