AngularFire2编译报错：Namespace无User成员及auth属性不存在

嘿，我来帮你搞定这个编译错误！你遇到的这两个问题，主要是因为Firebase版本和AngularFire2的导入方式不匹配导致的，下面一步步给你解决：

问题背景 #

你在使用AngularFire2开发Angular应用时，编写了AfService服务和AppModule模块，但编译时出现两个错误：

1. Namespace '"/Users/Triathlon/Desktop/cms/cms-app/node_modules/firebase/app/index"' has no exported member 'User'.
2. Property 'auth' does not exist on type 'typeof "/Users/Triathlon/Desktop/cms/cms-app/node_modules/firebase/app/index"'.

你的原始代码如下：

AfService服务文件 #

import { Injectable } from '@angular/core'; 
import {AngularFireAuth} from 'angularfire2/auth'; 
import {Observable} from 'rxjs/Observable'; 
import * as firebase from 'firebase/app'; 

@Injectable() 
export class AfService { 
  user: Observable<firebase.User>; 
  constructor(public afAuth : AngularFireAuth){ 
    this.user=afAuth.authState; 
  } 
  loginWithGoogle(){ 
    const provider= new firebase.auth.GoogleAuthProvider(); 
    this.afAuth.auth.signInWithPopup(provider); 
  } 
  logout(){ 
    this.afAuth.auth.signOut(); 
  } 
}

AppModule模块文件 #

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import {AngularFireModule} from 'angularfire2'; 
import {AngularFireDatabaseModule,AngularFireDatabase} from 'angularfire2/database'; 
import {AppRoutingModule} from './app-routing-module'; 
import { AppComponent } from './app.component'; 
import {environment} from '../environments/environment'; 
import { PagesListComponent } from './pages-list/pages-list.component'; 
import { LoginPageComponent } from './login-page/login-page.component'; 
import {AfService} from './providers/af.service'; 
import {AngularFireAuthModule} from 'angularfire2/auth'; 

@NgModule({ 
  declarations: [ 
    AppComponent, 
    PagesListComponent, 
    LoginPageComponent, 
  ], 
  imports: [ 
    BrowserModule, 
    AngularFireModule.initializeApp(environment.firebase), 
    AngularFireDatabaseModule, 
    AppRoutingModule, 
    AngularFireAuthModule 
  ], 
  providers: [AfService], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { }

错误原因分析 #

这两个错误本质是：

• 新版本的Firebase已经把auth相关的类型（比如User）和API（比如GoogleAuthProvider）从firebase/app移到了单独的firebase/auth模块中
• AngularFire2的API也更新了，不需要再通过afAuth.auth来调用方法，直接使用AngularFireAuth实例的方法即可

解决方案 #

1. 修正AfService的导入和代码逻辑 #

把原来的Firebase导入方式改成模块化导入，同时调整AngularFireAuth的调用方式：

import { Injectable } from '@angular/core';
// 注意：如果你的AngularFire是新版本，路径是@angular/fire/auth，旧版本保留angularfire2/auth
import { AngularFireAuth } from 'angularfire2/auth'; 
import { Observable } from 'rxjs';
// 从firebase/auth导入需要的类型和Provider
import { User } from 'firebase/auth';
import { GoogleAuthProvider } from 'firebase/auth';

@Injectable()
export class AfService {
  // 新版本中authState返回的是User|null类型，更严谨
  user: Observable<User | null>;

  constructor(public afAuth: AngularFireAuth) {
    this.user = afAuth.authState;
  }

  loginWithGoogle() {
    const provider = new GoogleAuthProvider();
    // 直接调用afAuth的signInWithPopup，不需要.auth属性
    return this.afAuth.signInWithPopup(provider);
  }

  logout() {
    // 同样直接调用afAuth的signOut方法
    return this.afAuth.signOut();
  }
}

2. 调整AppModule的导入路径（如果是新版本AngularFire） #

如果你的项目使用的是较新的AngularFire版本（比如7.x+），需要把angularfire2的导入替换成@angular/fire：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// 替换成@angular/fire的导入
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule, AngularFireDatabase } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AppRoutingModule } from './app-routing-module';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { PagesListComponent } from './pages-list/pages-list.component';
import { LoginPageComponent } from './login-page/login-page.component';
import { AfService } from './providers/af.service';

@NgModule({
  declarations: [
    AppComponent,
    PagesListComponent,
    LoginPageComponent,
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AppRoutingModule,
    AngularFireAuthModule
  ],
  providers: [AfService],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 确保依赖版本兼容 #

如果上述修改后还是报错，大概率是版本不匹配问题。你可以根据AngularFire的版本安装对应的Firebase版本：

• AngularFire 7.x+ 对应 Firebase 9.x+
• AngularFire 5.x 对应 Firebase 7.x左右

比如安装兼容的新版本：

npm install @angular/fire firebase@9

验证修改 #

修改完成后，重新启动项目：

ng serve

如果编译通过，说明问题已经解决啦！

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