I cannot use the firebase ui even following the instruction

[SNAILTHELAZY]

Bug Report or Feature Request (mark with an x)

• [x] bug report
• [ ] feature request

OS and Version?

Ubuntu 20.04, linux x64

Versions

Angular CLI: 10.0.7 Node:14.15.0 "@angular/animations": "^10.0.14", "@angular/common": "~10.0.11", "@angular/compiler": "~10.0.11", "@angular/core": "~10.0.11", "@angular/fire": "^6.0.4-canary.9a26fbe", "@angular/forms": "^10.0.14", "@angular/platform-browser": "~10.0.11", "@angular/platform-browser-dynamic": "~10.0.11", "@angular/router": "~10.0.11", "@firebaseui/ng-bootstrap": "^0.4.1", "@ng-bootstrap/ng-bootstrap": "^8.0.0", "bootstrap": "^4.5.3", "firebase": "^8.0.2", "font-awesome": "^4.7.0", "rxjs": "~6.5.5", "tslib": "^2.0.0", "zone.js": "~0.10.3"

The log given by the failure

Logging in the terminal

ERROR in ./node_modules/@firebaseui/ng-bootstrap/__ivy_ngcc__/esm2015/ng-bootstrap.js 1612:29-54
"export 'FirebaseNameOrConfigToken' was not found in '@angular/fire'

ERROR in ./node_modules/@firebaseui/ng-bootstrap/__ivy_ngcc__/esm2015/ng-bootstrap.js 1608:29-49
"export 'FirebaseOptionsToken' was not found in '@angular/fire'

ERROR in ./node_modules/@firebaseui/ng-bootstrap/__ivy_ngcc__/esm2015/ng-bootstrap.js 551:21-25
"export 'auth' was not found in 'firebase'

ERROR in ./node_modules/@firebaseui/ng-bootstrap/__ivy_ngcc__/esm2015/ng-bootstrap.js 552:27-31
"export 'auth' was not found in 'firebase'

ERROR in ./node_modules/@firebaseui/ng-bootstrap/__ivy_ngcc__/esm2015/ng-bootstrap.js 553:26-30
"export 'auth' was not found in 'firebase'

ERROR in ./node_modules/@firebaseui/ng-bootstrap/__ivy_ngcc__/esm2015/ng-bootstrap.js 554:25-29
"export 'auth' was not found in 'firebase'
    
    ERROR in node_modules/@firebaseui/ng-bootstrap/auth/module/interfaces/config.interface.d.ts:1:32 - error TS2694: Namespace '"/home/hong/\u6587\u4EF6/public/Academic/Testing/firebaseui-bootstrap/node_modules/firebase/index"' has no exported member 'auth'.
    
    1 import AuthProvider = firebase.auth.AuthProvider;
                                     ~~~~
    node_modules/@firebaseui/ng-bootstrap/auth/module/services/firestore-sync.service.d.ts:3:10 - error TS2614: Module '"../../../../../firebase"' has no exported member 'UserInfo'. Did you mean to use 'import UserInfo from "../../../../../firebase"' instead?
    
    3 import { UserInfo } from 'firebase';
               ~~~~~~~~
    node_modules/@firebaseui/ng-bootstrap/auth/module/services/auth-process.service.d.ts:6:10 - error TS2614: Module '"../../../../../firebase"' has no exported member 'User'. Did you mean to use 'import User from "../../../../../firebase"' instead?
    
    6 import { User, UserInfo } from 'firebase';
               ~~~~
    node_modules/@firebaseui/ng-bootstrap/auth/module/services/auth-process.service.d.ts:6:16 - error TS2614: Module '"../../../../../firebase"' has no exported member 'UserInfo'. Did you mean to use 'import UserInfo from "../../../../../firebase"' instead?
    
    6 import { User, UserInfo } from 'firebase';
                     ~~~~~~~~
    node_modules/@firebaseui/ng-bootstrap/auth/module/services/auth-process.service.d.ts:7:34 - error TS2694: Namespace '"/home/hong/\u6587\u4EF6/public/Academic/Testing/firebaseui-bootstrap/node_modules/firebase/index"' has no exported member 'auth'.
    
    7 import UserCredential = firebase.auth.UserCredential;
                                       ~~~~
    node_modules/@firebaseui/ng-bootstrap/auth/module/components/auth/auth.component.d.ts:6:10 - error TS2724: Module '"../../../../../../@ng-bootstrap/ng-bootstrap/ng-bootstrap"' has no exported member 'NgbTabset'. Did you mean 'NgbToast'?
    
    6 import { NgbTabset } from '@ng-bootstrap/ng-bootstrap';

Desired functionality

Able to use the firebaseui with google login

Mention any other details that might be useful

1. Just following the instruction from both angularfire and the firebaseui/ng-bootstrap to import the library after installing all dependencies:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import {AngularFireAuthModule} from '@angular/fire/auth';

import {NgbAuthFirebaseUIModule} from '@firebaseui/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    NgbAuthFirebaseUIModule.forRoot(environment.firebase),
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Including the methods to handle the states in app.component.ts:

import { Component } from '@angular/core';
import {OnInit} from '@angular/core';
import {AuthProvider} from '@firebaseui/ng-bootstrap';
import {AngularFireAuth} from '@angular/fire/auth';
import firebase from 'firebase/app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'firebaseui-bootstrap';
  
  providers=AuthProvider;

  ngOnInit(){}

  printUser(event){
    console.log(event);
  }

  printError(event){
    console.error(event);
  }
}

3. add the ui in the app.component.html:

<ngb-auth-firebaseui [providers]="[providers.Google]" (onSuccess)="printUser($event)" (onError)="printError()"></ngb-auth-firebaseui>

thank you for helping me out and solve the problem.

[dpsifr]

I'm seeing exactly the same thing. I've tried every combination of clearing out, re-installing, making sure dependencies are there, installing through ng and npm. Same results as above.

[djangofan]

Yep, I get the same thing. The demo project won't compile on its own. Needs modification so that it will compile out of the box.

[IRostom]

I was facing the same issue, this compilation error disappeared after I changed it to "@angular/fire": "^5.1.0".

I changed it to this version based on the library package.json file.

But still following the demo is not enough to make it work for me, the console logs this error for me

Error: Token InjectionToken angularfire2.app.nameOrConfig is missing a ɵprov definition.
    at injectableDefOrInjectorDefFactory (core.js:17278)
    at providerToFactory (core.js:17385)
    at providerToRecord (core.js:17332)
    at R3Injector.processProvider (core.js:17148)
    at core.js:17109
    at core.js:1400
    at Array.forEach (<anonymous>)
    at deepForEach (core.js:1400)
    at R3Injector.processInjectorType (core.js:17105)
    at core.js:16864

in the root module I added NgbAuthFirebaseUIModule.forRoot(environment.firebase) to the imports list. where environment.firebase points to my firebase project config

firebase: {
    apiKey: string;
    authDomain: string;
    databaseURL: string;
    projectId: string;
    storageBucket: string;
    messagingSenderId: string;
}

[Ki-csen]

I have faced the same issue with angular 10, but unfortunately, I cannot update to 11 because of missing dependencies. So, I have tried to turn off Ivy and it works. I hope my dependency issues will be resolved soon, but the following workaround solved the mentioned issue for me: tsconfig.json:

"angularCompilerOptions": {
    "enableIvy": false
  }

[aevora]

Same problem here. I have tried the solutions proposed but it still not working.