Ionic3应用导入AngularFireAuth报错，需添加@NgModule注解求助

错误原因分析 #

你遇到的Uncaught Error: Unexpected value 'AngularFireAuth' imported by the module 'AppModule'错误，核心问题很明确：AngularFireAuth是一个服务类，不是Angular模块，你错误地把它放到了AppModule的imports数组里——只有带@NgModule装饰器的类才能放在imports中，服务类应该放在providers数组里供依赖注入使用。

具体修复步骤 #

结合你的app.module.ts代码片段，我整理了针对性的修改方案：

1. 导入正确的AngularFire模块与服务
   先确保你导入了两个关键模块：AngularFireModule（用于初始化Firebase）和AngularFireAuthModule（身份验证功能模块），同时单独导入AngularFireAuth服务：

   import { AngularFireModule } from 'angularfire2';
   import { AngularFireAuthModule } from 'angularfire2/auth';
   import { AngularFireAuth } from 'angularfire2/auth'; // 这是服务，别放imports里
   

2. 调整AppModule的结构

   • 把AngularFireAuth从imports数组中彻底移除
   • 将AngularFireAuth添加到providers数组中
   • 确保AngularFireModule.initializeApp(...)和AngularFireAuthModule在imports数组内

修改后的app.module.ts核心部分示例：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list'; // 补全你的页面路径

// 导入AngularFire相关内容
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireAuth } from 'angularfire2/auth';

// 从Firebase控制台复制的项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DB_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID"
};

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    // 这里只放AngularFire的模块
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    IonicErrorHandler,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    // 把AngularFireAuth服务放在这里
    AngularFireAuth
  ]
})
export class AppModule {}

额外注意事项 #

• 版本兼容性：Ionic3基于Angular5，推荐安装适配的AngularFire2版本，用以下命令安装：

  npm install firebase@5.0.4 angularfire2@5.0.0-rc.11 --save
  

• 区分模块与服务：带Module后缀的是NgModule，必须放imports；不带后缀的是服务，要放providers（Angular6+的providedIn特性在Ionic3用的Angular5中不支持）

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