Angular项目注入Auth时触发NG0204参数解析错误求助

问题根源 #

出现NG0204: Can't resolve all parameters for Auth: (?)错误的核心原因：

• 手动在模块providers中声明了Auth，但Auth并非可直接注入的服务，需通过Angular Fire的专属模块自动提供依赖
• 缺少AngularFireAuthModule（对应你使用的compat版本）的导入，导致Angular无法解析Auth的依赖链

具体修复步骤 #

1. 修正AppModule配置 #

打开app.module.ts，执行以下调整：

• 新增AngularFireAuthModule导入并加入imports数组
• 移除providers中的Auth声明，模块会自动处理该服务的注入

修改后的关键代码片段：

// 新增compat版本的Auth模块导入
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AuthService } from './services/auth.service';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(routes),
    NgbModule,
    AngularFireDatabaseModule,
    AngularFirestoreModule,
    // 新增这一行
    AngularFireAuthModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    ReactiveFormsModule,
    AuthModule.forRoot({
      domain: 'dev-gumhee1zxgvdei6o.us.auth0.com',
      clientId: 'Uaxgrtoga5oWWJYeZ3xRjDNisMMhNDL9',
      authorizationParams: {
        redirect_uri: window.location.origin
      }
    }),
  ],
  // 移除providers中的Auth
  providers: [ProductService, AuthService],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. 统一Auth Service的API使用 #

你的auth.service.ts同时混用了模块化Auth和compat版本的AngularFireAuth，容易引发冲突，建议统一为一种模式：

模式一：沿用Compat版本（与现有其他Fire模块保持一致）

修改auth.service.ts，移除Auth注入，直接使用AngularFireAuth的原生authState：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root' // 确保服务为根注入（若未添加需补充）
})
export class AuthService {
  // 使用AngularFireAuth内置的authState
  currentUser$ = this.fireAuth.authState;

  constructor(
    private fireAuth: AngularFireAuth, 
    private router: Router, 
    private fireServices: AngularFirestore
  ) { }
}

模式二：切换为模块化API（Angular Fire v7+推荐）

如果要使用模块化Auth，需：

• 从@angular/fire/auth导入AngularFireAuthModule（非compat版本）
• 保留AuthService中Auth的注入，currentUser$继续使用authState(this.auth)

修改后的app.module.ts导入：

import { AngularFireAuthModule } from '@angular/fire/auth';

3. 验证服务注入正确性 #

确保AuthService和ProductService的注入配置正确：

• 若未使用providedIn: 'root'，需在模块providers中声明服务
• 检查ProductService中注入的AuthService能被正常解析

验证修复 #

完成上述修改后重启Angular应用，注入错误应消失，user$ | async可正常获取用户信息并渲染欢迎文本。

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