Ionic4+@angular/fire聊天应用登录页白屏，报AngularFireAuth无提供者错误求助

Hey there, let's work through fixing this error popping up on your login page. The issue stems from a few small misconfigurations in your app.module.ts file—let's break them down and fix them:

Key Issues to Address #

• Incorrect import casing: You used @Angular/fire/auth (capitalized "A") instead of the correct lowercase @angular/fire/auth for the AngularFireAuth import. Angular package names are case-sensitive here.
• Redundant provider declarations: You don’t need to add AngularFireModule, AngularFireAuthModule, or AngularFireAuth to the providers array. The AngularFireAuthModule you already imported in the imports section automatically registers the AngularFireAuth service for you.
• Incomplete syntax: Your providers array was missing a closing bracket ] and proper formatting, which would also cause runtime issues.

Corrected app.module.ts Code #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StatusBar } from '@ionic-native/status-bar/ngx';

// Firebase imports (fixed casing and proper structure)
import { firebaseConfig } from '../environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule, AngularFireAuth } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { HttpClient } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule
  ],
  providers: [StatusBar, HttpClient], // Only include services that need manual provisioning
  bootstrap: [AppComponent] // Ensure this bootstrap array is present
})
export class AppModule {}

Quick Extra Checks #

• Double-check that you’ve installed all required dependencies: run npm install @angular/fire firebase if you haven’t already.
• Verify your firebaseConfig in environment.ts matches the exact credentials from your Firebase project console.

Once you make these changes, restart your development server, and the login page should load without the white screen and provider error.

内容的提问来源于stack exchange，提问作者Diogène