Update sample project to standalone components #197

Author: RaphaelJenni

projects/firebaseui-angular-library/src/lib/firebaseui-angular-library.component.spec.ts

@@ -14,24 +14,24 @@ describe('FirebaseuiAngularLibraryComponent', () => {
     firebaseAuthState = new Subject();
 
     TestBed.configureTestingModule({
-      declarations: [FirebaseuiAngularLibraryComponent],
-      providers: [
+    imports: [FirebaseuiAngularLibraryComponent],
+    providers: [
         {
-          provide: AngularFireAuth,
-          useValue: new class {
-            authState = firebaseAuthState.asObservable();
-          }()
+            provide: AngularFireAuth,
+            useValue: new class {
+                authState = firebaseAuthState.asObservable();
+            }()
         },
         {
-          provide: FirebaseuiAngularLibraryService,
-          useValue: new class {
-            firebaseUiInstance = {};
-          }
+            provide: FirebaseuiAngularLibraryService,
+            useValue: new class {
+                firebaseUiInstance = {};
+            }
         },
-        {provide: 'firebaseUIAuthConfig', useValue: {main: 'MAIN', overwritten: 'MAIN'}},
-        {provide: 'firebaseUIAuthConfigFeature', useValue: {feature: 'FEATURE', overwritten: 'FEATURE'}}
-      ]
-    })
+        { provide: 'firebaseUIAuthConfig', useValue: { main: 'MAIN', overwritten: 'MAIN' } },
+        { provide: 'firebaseUIAuthConfigFeature', useValue: { feature: 'FEATURE', overwritten: 'FEATURE' } }
+    ]
+})
       .compileComponents();
   }));
 

projects/firebaseui-angular-library/src/lib/firebaseui-angular-library.component.ts

@@ -14,8 +14,9 @@ import User = firebase.User;
 import UserCredential = firebase.auth.UserCredential;
 
 @Component({
-  selector: 'firebase-ui',
-  template: '<div id="firebaseui-auth-container"></div>'
+    selector: 'firebase-ui',
+    template: '<div id="firebaseui-auth-container"></div>',
+    standalone: true
 })
 export class FirebaseuiAngularLibraryComponent implements OnInit, OnDestroy {
   private static readonly COMPUTED_CALLBACKS = 'COMPUTED_CALLBACKS';

projects/firebaseui-angular-library/src/lib/firebaseui-angular-library.module.ts

@@ -5,12 +5,12 @@ import {NativeFirebaseUIAuthConfig} from './firebaseui-angular-library.helper';
 import {FirebaseuiAngularLibraryService} from './firebaseui-angular-library.service';
 
 @NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: [FirebaseuiAngularLibraryComponent],
-  providers: [FirebaseuiAngularLibraryService],
-  exports: [FirebaseuiAngularLibraryComponent]
+    imports: [
+        CommonModule,
+        FirebaseuiAngularLibraryComponent
+    ],
+    providers: [FirebaseuiAngularLibraryService],
+    exports: [FirebaseuiAngularLibraryComponent]
 })
 export class FirebaseUIModule {
   static forRoot(firebaseUiAuthConfig: NativeFirebaseUIAuthConfig): ModuleWithProviders<FirebaseUIModule> {

src/app/app.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
-  selector: 'fbui-ng-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'fbui-ng-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [RouterOutlet]
 })
 export class AppComponent {
 

src/app/app.module.ts

@@ -1,12 +1,14 @@
 import {Component, OnInit} from '@angular/core';
 import {AngularFireAuth} from '@angular/fire/compat/auth';
-import {FirebaseUISignInFailure, FirebaseUISignInSuccessWithAuthResult} from 'firebaseui-angular';
-import {Router} from '@angular/router';
+import { FirebaseUISignInFailure, FirebaseUISignInSuccessWithAuthResult, FirebaseUIModule } from 'firebaseui-angular';
+import { Router, RouterLink } from '@angular/router';
 
 @Component({
-  selector: 'fbui-ng-main',
-  templateUrl: './main.component.html',
-  styleUrls: ['./main.component.scss']
+    selector: 'fbui-ng-main',
+    templateUrl: './main.component.html',
+    styleUrls: ['./main.component.scss'],
+    standalone: true,
+    imports: [FirebaseUIModule, RouterLink]
 })
 export class MainComponent implements OnInit {
 

src/app/main/main.component.ts

@@ -9,12 +9,12 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [
-    CommonModule,
-    FirebaseUIModule.forFeature({tosUrl: 'MAIN_MODULE'}),
-    RouterModule.forChild(routes)
-  ],
-  declarations: [MainComponent]
+    imports: [
+        CommonModule,
+        FirebaseUIModule.forFeature({ tosUrl: 'MAIN_MODULE' }),
+        RouterModule.forChild(routes),
+        MainComponent
+    ]
 })
 export class MainModule {
 }

src/app/main/main.module.ts

@@ -1,11 +1,14 @@
 import {Component, OnInit} from '@angular/core';
 import {AngularFireAuth} from '@angular/fire/compat/auth';
-import {FirebaseUISignInSuccessWithAuthResult} from 'firebaseui-angular';
+import { FirebaseUISignInSuccessWithAuthResult, FirebaseUIModule } from 'firebaseui-angular';
+import { RouterLink } from '@angular/router';
 
 @Component({
-  selector: 'fbui-ng-second-page',
-  templateUrl: './second-page.component.html',
-  styleUrls: ['./second-page.component.scss']
+    selector: 'fbui-ng-second-page',
+    templateUrl: './second-page.component.html',
+    styleUrls: ['./second-page.component.scss'],
+    standalone: true,
+    imports: [FirebaseUIModule, RouterLink]
 })
 export class SecondPageComponent implements OnInit {
 

src/app/second-page/second-page.component.ts

@@ -10,15 +10,16 @@ const routes: Routes = [
 
 
 @NgModule({
-  imports: [
-    CommonModule,
-    FirebaseUIModule.forFeature({
-      signInOptions: [
-        firebase.auth.GoogleAuthProvider.PROVIDER_ID]
-    }),
-    RouterModule.forChild(routes)
-  ],
-  declarations: [SecondPageComponent]
+    imports: [
+        CommonModule,
+        FirebaseUIModule.forFeature({
+            signInOptions: [
+                firebase.auth.GoogleAuthProvider.PROVIDER_ID
+            ]
+        }),
+        RouterModule.forChild(routes),
+        SecondPageComponent
+    ]
 })
 export class SecondModule {
 }

src/app/second-page/second.module.ts

@@ -1,12 +1,57 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {enableProdMode, importProvidersFrom} from '@angular/core';
+
+
+import {environment} from './environments/environment';
+import {AppComponent} from './app/app.component';
+import {firebase, firebaseui, FirebaseUIModule} from 'firebaseui-angular';
+import {AngularFireAuthModule} from '@angular/fire/compat/auth';
+import {AngularFireModule} from '@angular/fire/compat';
+import {AppRoutingModule} from './app/app-routing.module';
+import {FormsModule} from '@angular/forms';
+import {bootstrapApplication, BrowserModule} from '@angular/platform-browser';
+
+const firebaseUiAuthConfig: firebaseui.auth.Config = {
+  signInFlow: 'popup',
+  signInOptions: [
+    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+    {
+      scopes: [
+        'public_profile',
+        'email',
+        'user_likes',
+        'user_friends'
+      ],
+      customParameters: {
+        'auth_type': 'reauthenticate'
+      },
+      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID
+    },
+    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
+    firebase.auth.GithubAuthProvider.PROVIDER_ID,
+    {
+      requireDisplayName: false,
+      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
+    },
+    firebase.auth.PhoneAuthProvider.PROVIDER_ID,
+    firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
+  ],
+  tosUrl: '<your-tos-link>',
+  privacyPolicyUrl: '<your-privacyPolicyUrl-link>',
+  credentialHelper: firebaseui.auth.CredentialHelper.GOOGLE_YOLO
+};
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+  providers: [importProvidersFrom(
+    BrowserModule,
+    FormsModule,
+    AppRoutingModule,
+    AngularFireModule.initializeApp(environment.firebaseConfig),
+    AngularFireAuthModule,
+    FirebaseUIModule.forRoot(firebaseUiAuthConfig))]
+})
   .catch(err => console.log(err));