Ionic3集成Firebase时使用AngularFireAuth遇StaticInjectorError求助

嘿，我来帮你搞定这个问题！你碰到的NullInjectorError: No provider for InjectionToken FirebaseAppConfigToken!错误，核心原因是没有正确初始化AngularFireModule——AngularFire需要你的Firebase项目配置来创建合法的FirebaseApp实例，而你当前的AppModule里只导入了认证相关的模块，却没提供必要的配置信息。

下面是具体的解决步骤：

1. 获取Firebase项目配置 #

首先你得从Firebase控制台拿到自己项目的配置：

• 打开Firebase控制台，进入你的目标项目
• 点击页面右上角的齿轮图标（设置），选择「项目设置」
• 下滑到「你的应用」区域，选择Web应用（如果还没有就点击「添加应用」创建一个）
• 复制弹出框里的firebaseConfig对象，格式大概是这样：

const firebaseConfig = {
  apiKey: "你的apiKey",
  authDomain: "你的authDomain",
  databaseURL: "你的databaseURL",
  projectId: "你的projectId",
  storageBucket: "你的storageBucket",
  messagingSenderId: "你的messagingSenderId",
  appId: "你的appId"
};

2. 修正AppModule的配置 #

接下来修改你的App.Module.ts，完成AngularFire的初始化，同时注意不要手动把AngularFireAuth加到providers里（AngularFireAuthModule已经自动提供了这个服务）：

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';

// 粘贴你从Firebase控制台复制的配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

@NgModule({
  imports: [
    BrMaskerModule,
    BrowserModule,
    IonicModule.forRoot(MyApp),
    // 关键：初始化AngularFireModule
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    AuthenticationService,
    UserService,
    WindowService
    // 移除这里的AngularFireAuth，避免重复提供
  ]
})
export class AppModule {}

额外注意事项 #

• 如果你还没安装依赖包，先运行以下命令安装：

  npm install angularfire2 firebase --save
  

• Ionic3建议搭配angularfire2@^5.0.0-rc.11版本，避免版本不兼容带来的其他问题，如果当前版本不对，可以调整版本号后重新安装。

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