Bug Report or Feature Request (mark with an x
)
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
- 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 { }
- 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);
}
}
- 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.