How to use this wrapper with new Standalone only components?

[Zaffer]

I used the Ionic v7 Tabs starter project which does not use NgModules anymore. Where do I put config, and .initializeApp functions now?

[Zaffer]

Asked ChatGPT which gave me the following answer, is this best practice now?

Question:

"I am using v7 of Ionic and want to setup FirebaseUI-Angular but the template uses the new Angular standalone components and does not use NgModules. Where do a insert AngularFireModule.initializeApp(environment.firebaseConfig) and FirebaseUIModule.forRoot(firebaseUiAuthConfig)?

Reply:

"If you are using Ionic v7 with the new Angular standalone components and not using NgModules, you can initialize AngularFireModule and FirebaseUIModule in the app.component.ts file.

First, you need to import the necessary modules and configurations:

Copy code
import { AngularFireModule } from '@angular/fire/compat';
import { firebaseConfig } from '../environments/environment';
import { FirebaseUIModule, firebaseUiAuthConfig } from 'firebaseui-angular';
Then, you can initialize the AngularFireModule and FirebaseUIModule in the ngOnInit lifecycle hook of the AppComponent:

typescript
Copy code
export class AppComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {
    AngularFireModule.initializeApp(firebaseConfig);
    FirebaseUIModule.forRoot(firebaseUiAuthConfig);
  }
}

Make sure to import OnInit from @angular/core and implement it in your AppComponent class.

Note: It's recommended to use NgModules for organizing your code and dependencies, and to use forRoot only in your app's root module."

[RaphaelJenni]

I'm currently a bit low on time. It is on my todo list, but I cannot give any timeframe. If it is urgent, feel free to create a PR.

[ginobean]

I've got this working for the standalone components version.

In main.ts::

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      BrowserModule,
      MatToolbarModule,
      MatIconModule,
      MatCardModule,
      DragDropModule,
      MatButtonModule,
      MatDialogModule,
      MatInputModule,
      FormsModule
    ),
    ...appConfig.providers,
    provideAnimations(),
  ],
}).catch((err) => console.error(err));

In app.config.ts::

import { ApplicationConfig, importProvidersFrom } from '@angular/core';

import {
  ScreenTrackingService,
  UserTrackingService,
  getAnalytics,
  provideAnalytics,
} from '@angular/fire/analytics';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { getFunctions, provideFunctions } from '@angular/fire/functions';
import { getMessaging, provideMessaging } from '@angular/fire/messaging';
import { getPerformance, providePerformance } from '@angular/fire/performance';
import { getStorage, provideStorage } from '@angular/fire/storage';
import { provideRouter } from '@angular/router';
import { FirebaseUIModule, firebase, firebaseui } from 'firebaseui-angular';
import { routes } from './app/app.routes';
import { environment } from './environments/environment.development';
import { FIREBASE_OPTIONS } from '@angular/fire/compat';

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,
};

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: FIREBASE_OPTIONS, useValue: environment.firebase },
    provideRouter(routes),
    importProvidersFrom([
      provideFirebaseApp(() => initializeApp(environment.firebase)),
      provideAnalytics(() => getAnalytics()),
      provideAuth(() => getAuth()),
      provideFirestore(() => getFirestore()),
      provideFunctions(() => getFunctions()),
      provideMessaging(() => getMessaging()),
      providePerformance(() => getPerformance()),
      provideStorage(() => getStorage()),
      FirebaseUIModule.forRoot(firebaseUiAuthConfig),
    ]),
    ScreenTrackingService,
    UserTrackingService,
  ],
};

Make sure you follow the compatibility chart that @RaphaelJenni listed. At one point, I tried to use major version 10 of the firebase module and it failed badly.

[RaphaelJenni]

Version 6.2.0 brings support for angular 17. The demo/test application now uses standalone components.