FirebaseUI-Angular
FirebaseUI-Angular copied to clipboard
Problem setting up the package
I followed the instructions in README to setup this package for my Angular 16 project.
But for some reason I get this error
This is my configuration.
app.module.ts
import { MatIconModule } from '@angular/material/icon';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './routing/app-routing.module';
import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatDividerModule } from '@angular/material/divider';
import { MatRippleModule } from '@angular/material/core';
import { HeaderComponent } from './components/header/header.component';
import { LandingPageComponent } from './pages/landing-page/landing-page.component';
import { LoginComponent } from './components/login/login.component';
import { AngularFireModule } from '@angular/fire/compat';
import { environment } from 'src/environments/environment';
import {
AngularFireAuthModule,
USE_EMULATOR as USE_AUTH_EMULATOR,
} from '@angular/fire/compat/auth';
import { firebase, firebaseui, FirebaseUIModule } from 'firebaseui-angular';
export const firebaseUiAuthConfig: firebaseui.auth.Config = {
signInFlow: 'popup',
signInOptions: [
{
requireDisplayName: false,
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
},
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
],
//term of service
tosUrl: '<your-tos-link>',
//privacy url
privacyPolicyUrl: '<your-privacyPolicyUrl-link>',
//credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM
credentialHelper: firebaseui.auth.CredentialHelper.NONE,
};
const FirebaseModules = [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
FirebaseUIModule.forRoot(firebaseUiAuthConfig),
];
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
LandingPageComponent,
LoginComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatButtonModule,
MatIconModule,
MatTooltipModule,
MatDividerModule,
MatRippleModule,
...FirebaseModules,
],
providers: [
{
provide: USE_AUTH_EMULATOR,
useValue: !environment.production ? ['localhost', 9099] : undefined,
},
],
bootstrap: [AppComponent],
})
export class AppModule {}