NX+Module Federation+Angular项目Firebase Auth注入错误求助

问题根源 #

控制台抛出的NullInjectorError: No provider for Auth!错误，核心原因有两点：

1. 宿主应用AppModule未导入配置Firebase服务的SharedServiceModule，导致Firebase的Auth、Firestore等核心依赖未注册到应用依赖树中。
2. AuthService被重复添加到多个模块的providers数组（SharedServiceModule、SharedUiModule、AppModule），再加上providedIn: 'root'的配置，导致服务实例混乱，依赖链断裂。

修复步骤 #

1. 清理重复的AuthService提供者 #

• 移除SharedUiModule的providers数组中的AuthService
• 移除AppModule的providers数组中的AuthService
• 保留AuthService上的@Injectable({providedIn: 'root'})配置，这已足够让Angular在根注入器提供该服务

修改后的SharedUiModule.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [CommonModule, RouterModule],
  declarations: [HeaderComponent],
  exports: [HeaderComponent]
})
export class SharedUiModule {}

修改后的AppModule.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { appRoutes } from './app.routes';
import { SharedUiModule } from '@veda/shared/ui';
import { LandingComponent } from './landing/landing.component';
import { AuthComponent } from './auth/auth.component';
import { SharedServiceModule } from '@veda/shared/service';

@NgModule({
  declarations: [AppComponent, LandingComponent, AuthComponent],
  imports: [
    BrowserModule,
    SharedServiceModule,
    SharedUiModule,
    RouterModule.forRoot(appRoutes, { initialNavigation: 'enabledBlocking' }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. 调整SharedServiceModule的配置 #

移除SharedServiceModule的providers数组中的AuthService（已通过providedIn: 'root'全局提供），保持Firebase相关配置不变：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { firebaseEnv } from '@veda/shared/enviroment';
import {
  provideAnalytics,
  getAnalytics,
  ScreenTrackingService,
  UserTrackingService,
} from '@angular/fire/analytics';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { provideFunctions, getFunctions } from '@angular/fire/functions';
import { provideMessaging, getMessaging } from '@angular/fire/messaging';
import { providePerformance, getPerformance } from '@angular/fire/performance';
import { provideStorage, getStorage } from '@angular/fire/storage';

@NgModule({
  imports: [
    CommonModule,
    provideFirebaseApp(() => initializeApp(firebaseEnv)),
    provideAnalytics(() => getAnalytics()),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    provideFunctions(() => getFunctions()),
    provideMessaging(() => getMessaging()),
    providePerformance(() => getPerformance()),
    provideStorage(() => getStorage()),
  ],
  providers: [ScreenTrackingService, UserTrackingService],
})
export class SharedServiceModule {}

修复逻辑说明 #

• 宿主AppModule导入SharedServiceModule后，Firebase的Auth、Firestore等核心服务会被正确注册到根注入器，AuthService依赖的这些对象就能正常解析。
• 移除重复的AuthService提供者，避免Angular创建多个服务实例，确保依赖注入的一致性。

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