Angular 18集成Firebase注册报错auth/configuration-not-found求助

核心原因与分步解决方案 #

1. 启用Firebase项目的Email/Password登录方式 #

这个错误最常见的触发原因是你在Firebase控制台中未启用Email/Password认证方法：

• 登录Firebase控制台，进入目标项目
• 打开「Authentication」→「登录方法」标签页
• 找到「Email/Password」选项，点击启用并保存配置

2. 修正Firebase Auth的初始化关联 #

在Angular 18的独立配置模式下，确保provideAuth正确关联到已初始化的Firebase App实例，调整你的appConfig：

const firebaseConfig = {
  apiKey: 'api-key',
  authDomain: 'auth-domain', // 确认此值与Firebase控制台完全一致
  projectId: 'project-id',
  storageBucket: 'storage-bucket',
  messagingSenderId: 'messaging-sender-id',
  appId: 'app-id',
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    // 初始化Firebase App
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    // 明确关联已初始化的App实例获取Auth服务
    provideAuth(() => getAuth(getApp())),
  ],
};

3. 校验依赖版本兼容性 #

确保@angular/fire和firebase版本与Angular 18兼容，安装对应版本：

npm install @angular/fire@18 firebase@10

4. 补充错误处理逻辑（可选） #

你的服务与组件核心逻辑无问题，但可以添加错误捕获以便快速排查问题：

// AuthService中添加错误捕获
register(email: string, username: string, password: string): Observable<void> {
  const promise = createUserWithEmailAndPassword(this.firebaseAuth, email, password)
    .then((response) => updateProfile(response.user, { displayName: username }))
    .catch(err => {
      console.error('注册错误详情:', err);
      throw err;
    });
  return from(promise);
}

// 组件中添加表单验证与错误捕获
onSubmit() {
  const form = this.form.getRawValue();
  // 补充表单基础验证
  if (!form.email || !form.username || !form.password || form.password !== form.confirm_password) {
    return;
  }
  this.authService
    .register(form.email, form.username, form.password)
    .subscribe({
      next: () => { /* 路由跳转逻辑 */ },
      error: (err) => { console.error('组件层错误:', err); }
    });
}

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