如何移除Angular Firebase应用中的Firebase模拟器警告信息

该配置在@angular/fire 7.0及以上版本、Firebase JS SDK 9.0及以上版本可用，使用前请确认依赖版本符合要求。

• 定位项目中Firebase初始化、模拟器连接的配置文件：
  • Standalone组件模式通常为app.config.ts
  • NgModule模式通常为app.module.ts
• 在调用connectAuthEmulator方法连接Auth模拟器时，传入第三个配置参数，设置disableWarnings: true即可隐藏该警告。

代码示例 #

Standalone模式配置 #

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { environment } from './environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => {
      const auth = getAuth();
      if (!environment.production) {
        connectAuthEmulator(
          auth,
          'http://localhost:9099',
          { disableWarnings: true } // 新增该配置项关闭警告
        );
      }
      return auth;
    })
  ]
};

NgModule模式配置 #

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { getAuth, connectAuthEmulator } from '@angular/fire/auth';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase)
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
    if (!environment.production) {
      const auth = getAuth();
      connectAuthEmulator(
        auth,
        'http://localhost:9099',
        { disableWarnings: true } // 新增该配置项关闭警告
      );
    }
  }
}

注意事项 #

• 仅在本地开发环境添加该配置，生产环境不会连接模拟器，无需设置该参数
• 若项目同时使用Firestore、Storage等其他Firebase服务的模拟器，对应的connectFirestoreEmulator、connectStorageEmulator等连接方法同样支持disableWarnings参数，可按相同方式配置隐藏对应警告。

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