如何在Angular项目与自定义类库间共享AngularFire配置

你的错误根源在于自定义类库TCoreModule手动将AngularFirestore和AngularFireAuth添加到了providers数组中，这会干扰主模块AppModule中AngularFireModule的正常初始化流程，导致依赖注入链断裂。

问题分析 #

• 主项目AppModule已经正确通过AngularFireModule.initializeApp(firebaseConfig)完成了Firebase的初始化，并且导入了AngularFireAuthModule、AngularFirestoreModule等功能模块——这些模块会自动注册对应的服务（AngularFireAuth、AngularFirestore）到依赖注入系统中。
• 但你的类库TCoreModule在forRoot方法里手动添加了AngularFirestore和AngularFireAuth到providers，这相当于重新创建了这些服务的实例，而这些新实例无法获取到主模块初始化的Firebase配置（angularfire2.app.options），最终触发注入错误。

解决方案 #

我们需要调整类库的模块配置，让它依赖主模块的Firebase初始化，而不是手动提供服务：

1. 修改自定义类库的t-core.module.ts

• 首先，在模块的imports数组中添加AngularFireAuthModule和AngularFirestoreModule（不需要调用initializeApp，因为初始化已经在主模块完成）。
• 移除forRoot方法providers中的AngularFirestore和AngularFireAuth条目。

修改后的t-core.module.ts核心部分：

// 保留顶部的导入
import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFirestoreModule } from "@angular/fire/firestore";
import { AngularFireStorageModule } from "@angular/fire/storage";

@NgModule({
 declarations: [
 NotFoundComponent,
 SidebarComponent,
 SigninComponent,
 ChangePassComponent
 ],
 imports: [
 RouterModule,
 CommonModule,
 FormsModule,
 UIModule,
 TranslateModule.forRoot({
 loader: {
 provide: TranslateLoader,
 useFactory: HttpLoaderFactory,
 deps: [HttpClient]
 }
 }),
 NgbModule,
 // 添加Firebase功能模块，不初始化
 AngularFireAuthModule,
 AngularFirestoreModule,
 AngularFireStorageModule
 ],
 exports: [
 SidebarComponent,
 NotFoundComponent,
 SigninComponent,
 ChangePassComponent
 ]
})
export class TCoreModule {
 static forRoot(config: TCoreModuleConfig): ModuleWithProviders {
 return {
 ngModule: TCoreModule,
 providers: [
 AuthService,
 CalculationsService,
 DatesService,
 LocalizationService,
 NavService,
 AntiAuthGuard,
 AuthGuard,
 { provide: AUTO_AUTH_ROLE_CREDENTIALS, useValue: config.autoAuthRoleCredentials },
 { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
 { provide: LOCALE_ID, deps: [LocalizationService], useFactory: localizationService => localizationService.getLocale() },
 // 移除这里的AngularFirestore和AngularFireAuth
 ]
 };
 }
 static forChild(config: TCoreModuleConfig): ModuleWithProviders {
 return this.forRoot(config);
 }
}

2. 确认主项目配置无需修改

你的AppModule已经正确完成了Firebase的初始化，并且导入了所有必要的Firebase模块，这部分保持原样即可：

// AppModule中的导入部分
AngularFireModule.initializeApp(firebaseConfig),
AngularFireAuthModule,
AngularFireStorageModule,
AngularFirestoreModule,

3. 类库中使用Firebase服务

在类库的服务（比如AuthService）中，直接注入AngularFireAuth或AngularFirestore即可，不需要额外配置：

// 类库的AuthService示例
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';

@Injectable()
export class AuthService {
 constructor(private afAuth: AngularFireAuth) {
 // 使用afAuth进行认证操作
 }
}

关键原理 #

• Firebase的初始化必须在**应用根模块（AppModule）**中完成，这是唯一能正确传递全局配置的地方。
• 所有子模块（包括你的自定义类库模块）只需要导入对应的Firebase功能模块（如AngularFireAuthModule），就能自动获取根模块初始化的配置和服务实例，不需要手动提供服务。

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