How to use @angular/fire - 10 common examples

it('it should listen and then unsubscribe', (done) => {
    const itemRef = ref(rando());
    itemRef.set(batch);
    const obs = fromRef(itemRef, 'value');
    let count = 0;
    const sub = obs.subscribe(change => {
      count = count + 1;
      // hard coding count to one will fail if the unsub
      // doesn't actually unsub
      expect(count).toEqual(1);
      done();
      sub.unsubscribe();
      itemRef.push({ name: 'anotha one' });
    });
  });

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Add .withServerTransition() to support Universal rendering.
    // The application ID can be any identifier which is unique on
    // the page.
    BrowserModule.withServerTransition({appId: 'ngx-auth-firebaseui'}),
    Angulartics2Module.forRoot(),
    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
    AngularFireModule.initializeApp(firebaseKey),
    NgxAuthFirebaseUIModule.forRoot(firebaseKey, firebaseAppNameFactory,
      {
        enableFirestoreSync: true,
        toastMessageOnAuthSuccess: true,
        toastMessageOnAuthError: true,
        authGuardFallbackURL: 'examples/logged-out',
        authGuardLoggedInURL: 'examples/logged-in',
      }),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),
    HighlightModule.forRoot({

StoreModule.forRoot(reducers, {metaReducers}),
    StoreDevtoolsModule.instrument({
      maxAge: 15,                       // Retains last n states
      logOnly: environment.production,  // Restrict extension to log-onlAy mode
    }),
    EffectsModule.forRoot(effects),
    RouterModule.forRoot(
        [
          {path: '', component: HomePage},
          {
            path: ':org/:name',
            loadChildren: () => import('./repository/repository.module').then(m => m.RepositoryModule),
          },
        ],
        {preloadingStrategy: PreloadAllModules}),
    CAN_AUTH ? [AngularFireModule.initializeApp(FIREBASE_CONFIG), AngularFireAuthModule] : [],
  ],
  providers: [MatIconRegistry],
  bootstrap: [App]
})
export class AppModule {
}

HomePage,
    LoginPage,
    SignupPage,
    ProfilePage,
    SettingsPage,
    GroupPage,
    LeaderboardPage,
    LogoutPage,
    CameraPage,
    
  ],
  imports: [
    BrowserModule,
   // HttpClientModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseAuth),
    AngularFireAuthModule,
    AngularFireStorageModule,
    BrowserAnimationsModule
    
    
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    SignupPage,
    ProfilePage,
    SettingsPage,
    LeaderboardPage,
    GroupPage,

// firebase
import Config from './firebase';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFirestoreModule } from '@angular/fire/firestore';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(Config),
    AngularFireAuthModule,
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@Optional() @Inject(REMOTE_CONFIG_SETTINGS) settings:remoteConfig.Settings|null,
    @Optional() @Inject(DEFAULT_CONFIG) defaultConfig:DefaultConfig|null,
    private zone: NgZone
  ) {

    const remoteConfig = of(undefined).pipe(
      // @ts-ignore zapping in the UMD in the build script
      switchMap(() => import('firebase/remote-config')),
      map(() => _firebaseAppFactory(options, zone, nameOrConfig)),
      map(app => app.remoteConfig()),
      tap(rc => {
        if (settings) { rc.settings = settings }
        if (defaultConfig) { rc.defaultConfig = defaultConfig }
        this.default$ = empty(); // once the SDK is loaded, we don't need our defaults anylonger
      }),
      runOutsideAngular(zone),
      shareReplay(1)
    );

    const defaultToStartWith = Object.keys(defaultConfig || {}).reduce((c, k) => {
      c[k] = new Value("default", defaultConfig![k].toString());
      return c;
    }, {} as {[key:string]: remoteConfig.Value});

    const mapRemoteConfig = (rc: {[key:string]: Value | remoteConfig.Value}) => {
      const keys = Object.keys(rc);
      return keys.reduce((c, key, index) => {
        const value = rc[key];
        c[index] = new KeyedValue(key, value.getSource(), value.asString());
        return c;
      }, new Array(keys.length));
    }

constructor(
        analytics: AngularFireAnalytics,
        zone: NgZone
    ) {
        this.disposable = from(analytics.app).pipe(
            // TODO can I hook into auth being loaded...
            map(app => app.auth()),
            switchMap(auth => auth ? new Observable(auth.onAuthStateChanged.bind(auth)) : empty()),
            switchMap(user => analytics.setUserId(user ? user.uid : null!)),
            runOutsideAngular(zone)
        ).subscribe();
    }

constructor(
    @Inject(FirebaseOptionsToken) options:FirebaseOptions,
    @Optional() @Inject(FirebaseNameOrConfigToken) nameOrConfig:string|FirebaseAppConfig|null|undefined,
    @Inject(PLATFORM_ID) platformId: Object,
    zone: NgZone
  ) {

    // @ts-ignore zapping in the UMD in the build script
    const requireMessaging = from(import('firebase/messaging'));

    this.messaging = requireMessaging.pipe(
      map(() => _firebaseAppFactory(options, zone, nameOrConfig)),
      map(app => app.messaging()),
      runOutsideAngular(zone)
    );

    if (!isPlatformServer(platformId)) {

      this.requestPermission = this.messaging.pipe(
        switchMap(messaging => messaging.requestPermission()),
        runOutsideAngular(zone)
      );

    } else {

      this.requestPermission = throwError('Not available on server platform.');

    }

    this.getToken = this.messaging.pipe(

constructor(
    @Inject(FIREBASE_OPTIONS) options:FirebaseOptions,
    @Optional() @Inject(FIREBASE_APP_NAME) nameOrConfig:string|FirebaseAppConfig|null|undefined,
    @Optional() @Inject(ANALYTICS_COLLECTION_ENABLED) analyticsCollectionEnabled:boolean|null,
    zone: NgZone
  ) {
    const analytics = of(undefined).pipe(
      // @ts-ignore zapping in the UMD in the build script
      switchMap(() => zone.runOutsideAngular(() => import('firebase/analytics'))),
      map(() => _firebaseAppFactory(options, zone, nameOrConfig)),
      map(app => app.analytics()),
      tap(analytics => {
        if (analyticsCollectionEnabled === false) { analytics.setAnalyticsCollectionEnabled(false) }
      }),
      runOutsideAngular(zone),
      shareReplay(1)
    );

    return _lazySDKProxy(this, analytics, zone);
  }

HomeComponent,
    NavComponent
  ],
  imports: [
    CommonModule,
    BrowserModule.withServerTransition({appId: 'my-app'}),
    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full'},
      { path: 'articles/:id', loadChildren: () => import('./article/article.module').then(m => m.ArticleModule)},
      { path: 'authors/:id', loadChildren: () => import('./author/author.module').then(m => m.AuthorModule), ...canActivate(loggedIn)}
    ], { preloadingStrategy: PreloadAllModules, initialNavigation: 'enabled' }),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFirestoreModule.enablePersistence(),
    AngularFireAuthGuardModule,
    AngularFirePerformanceModule,
    AngularFireMessagingModule
    //PrebootModule.withConfig({ appRoot: 'app-root' })
  ],
  bootstrap: [ ],
  providers: [
//    { provide: EnableStateTransferToken, useValue: true }
  ]
})
export class AppModule { }