NG8001: 'firebase-ui' is not a known element:

Question

I earlier had a project with firebaseui 4.2.0 and recently created a new project which has firebase ui 6.0.2. My older project code looks like below:

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

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 => {
      //console.log('subscribed to firebase auth' + JSON.stringify(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')
      }
    });
  }

}

Now in the new project I am getting the following error

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.

Has things changed since 4.2.0? Please advise how to fix it

Answer 1

There are several reasons for error NG8001 and from the attached snippets it is hard to tell where is the problem.

Have you added firebase-ui to your selector?

@Component({
  selector: 'firebase-ui',
  // ...
})

Also, you can check RaphaelJenni GitHub repository and compare your code to that implementation.