FirebaseUI 6.0.2中<firebase-ui>报NG8001错误的解决咨询

问题背景 #

在FirebaseUI 4.2.0版本中，以下代码可正常运行：

登录组件模板（login.component.html） #

<ng-container *ngIf="core.loggedIn == false">
        <firebase-ui
        (signInSuccessWithAuthResult)="successCallback($event)"
                 (signInFailure)="errorCallback($event)">
        </firebase-ui> 
</ng-container>

登录组件逻辑（login.component.ts） #

export class LoginComponent implements OnInit {

  constructor(public core:CoreService,
    private afAuth: AngularFireAuth) { }

  successCallback(data: FirebaseUISignInSuccessWithAuthResult) {
    console.log('successCallback', data);
    this.core.loggedIn = true
  }

  errorCallback(data: FirebaseUISignInFailure) {
    alert('Failed to login')
    this.core.loggedIn = false
    console.warn('errorCallback', data);
  }

  ngOnInit() {
    this.afAuth.authState.subscribe(d => {
      if(d == null){
        this.core.loggedIn = false
      }else{
        this.core.loggedIn = true
        this.core.email = d.email!
        console.log("user logged in fetch user role for:" + d.email)
        this.core.openMenu('admin')
      }
    });
  }

}

但升级到FirebaseUI 6.0.2后，出现如下错误：

src/app/login/login.component.html:3:9 - error NG8001: 'firebase-ui' is not a known element:
1. If 'firebase-ui' is an Angular component, then verify that it is part of this module.
2. If 'firebase-ui' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

3         <firebase-ui
          ~~~~~~~~~~~~
4         (signInSuccessWithAuthResult)="successCallback($event)"
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5                  (signInFailure)="errorCallback($event)">
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/login/login.component.ts:17:16
    17   templateUrl: './login.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LoginComponent.

版本核心变更 #

从FirebaseUI 4.2.0到6.0.2，针对Angular集成的核心变更如下：

• 组件注册方式：旧版本可能自动全局注册了firebase-ui组件，新版本需要显式在NgModule中导入AngularFireUIModule并完成认证配置
• 组件选择器：原firebase-ui选择器已变更为firebase-ui-auth
• 依赖包：需使用官方维护的@firebaseui/angular-fire包（旧版本可能依赖第三方封装包）

修复步骤 #

1. 确认并安装正确依赖
   确保项目安装的是适配新版本的官方依赖：

   npm install @firebaseui/angular-fire firebase @angular/fire --save
   

2. 在NgModule中导入并配置AngularFireUIModule
   在AppModule或Login组件所在的FeatureModule中，添加Firebase及FirebaseUI的配置：

   import { NgModule } from '@angular/core';
   import { AngularFireModule } from '@angular/fire/compat';
   import { AngularFireAuthModule } from '@angular/fire/compat/auth';
   import { AngularFireUIModule } from '@firebaseui/angular-fire';
   import { firebase, firebaseui, FirebaseUIAuthConfig } from '@firebaseui/angular-fire';
   
   // 配置FirebaseUI认证选项，可按需添加其他登录方式
   const firebaseUiAuthConfig: FirebaseUIAuthConfig = {
     signInFlow: 'popup',
     signInOptions: [
       firebase.auth.EmailAuthProvider.PROVIDER_ID
     ],
     tosUrl: '/terms-of-service', // 替换为你的服务条款页面路径
     privacyPolicyUrl: '/privacy-policy' // 替换为你的隐私政策页面路径
   };
   
   @NgModule({
     imports: [
       AngularFireModule.initializeApp(你的Firebase项目配置),
       AngularFireAuthModule,
       AngularFireUIModule.forRoot(firebaseUiAuthConfig)
     ],
     // 其他模块配置项
   })
   export class AppModule { }
   

3. 更新模板组件选择器
   将模板中的<firebase-ui>替换为新版本的<firebase-ui-auth>，事件回调名称保持不变：

   <ng-container *ngIf="core.loggedIn == false">
     <firebase-ui-auth
       (signInSuccessWithAuthResult)="successCallback($event)"
       (signInFailure)="errorCallback($event)">
     </firebase-ui-auth>
   </ng-container>
   

4. 验证类型定义导入
   确保组件中的类型可以正确从官方包导入：

   import { FirebaseUISignInSuccessWithAuthResult, FirebaseUISignInFailure } from '@firebaseui/angular-fire';
   

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