How to use angularfire2 - 10 common examples

import { LogService } from './shared/log/log.service'
import { appConfig, DEFAULT_APP_CONFIG } from './shared/config/index' // TODO: check why barrel does not work?

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDER,
    HTTP_PROVIDERS,
    FIREBASE_PROVIDERS,
    // Initialize Firebase app  
    defaultFirebase({
        apiKey: "AIzaSyBxTIFIwi_rWHM3oeAtXSEi1nrEUvvlqu8",
        authDomain: "investsystemsorg.firebaseapp.com",
        databaseURL: "https://investsystemsorg.firebaseio.com",
        storageBucket: "investsystemsorg.appspot.com",
    }),
    firebaseAuthConfig({
        provider: AuthProviders.Google,
        method: AuthMethods.Redirect
    }),
    // { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
    // { provide: SEED_DATA, useClass: InMemoryDataService },      // in-mem server data
    Title,
    AuthGuard,
    MdIconRegistry,
    disableDeprecatedForms(),
    provideForms(),
    ChartsService,
    SpinnerService,
    LogService,
    appConfig(DEFAULT_APP_CONFIG)
]).then(
    () => window.console.info('Angular finished bootstrapping your application!'),
    (error) => {

/**
 * Basic configuration like Endpoint URL's, API version..
 */
const options = require('./../config.json');

// Initialize Firebase
export const firebaseConfig = {
    apiKey: options.firebase.apiKey,
    authDomain: options.firebase.authDomain,
    databaseURL: options.firebase.databaseURL,
    storageBucket: options.firebase.storageBucket,
};
const firebaseAuthConfig = {
    provider: AuthProviders.Password,
    method: AuthMethods.Password,
};

describe('App component', () => {
    beforeEach(() => TestBed.configureTestingModule({
        imports: [
            FormsModule,
            ReactiveFormsModule,
            AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig),
        ],
        providers: [
            HomeComponent,
        ],
    }));

    it('should have default data', inject([HomeComponent], (home: HomeComponent) => {
        expect(home.name).toEqual('Firebase SDK 3');

import { AngularFire, AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';

/**
 * Basic configuration like Endpoint URL's, API version..
 */
const options = require('./../config.json');

// Initialize Firebase
export const firebaseConfig = {
    apiKey: options.firebase.apiKey,
    authDomain: options.firebase.authDomain,
    databaseURL: options.firebase.databaseURL,
    storageBucket: options.firebase.storageBucket,
};
const firebaseAuthConfig = {
    provider: AuthProviders.Password,
    method: AuthMethods.Password,
};

describe('App component', () => {
    beforeEach(() => TestBed.configureTestingModule({
        imports: [
            FormsModule,
            ReactiveFormsModule,
            AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig),
        ],
        providers: [
            HomeComponent,
        ],
    }));

    it('should have default data', inject([HomeComponent], (home: HomeComponent) => {

import { appConfig, DEFAULT_APP_CONFIG } from './shared/config/index' // TODO: check why barrel does not work?

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDER,
    HTTP_PROVIDERS,
    FIREBASE_PROVIDERS,
    // Initialize Firebase app  
    defaultFirebase({
        apiKey: "AIzaSyBxTIFIwi_rWHM3oeAtXSEi1nrEUvvlqu8",
        authDomain: "investsystemsorg.firebaseapp.com",
        databaseURL: "https://investsystemsorg.firebaseio.com",
        storageBucket: "investsystemsorg.appspot.com",
    }),
    firebaseAuthConfig({
        provider: AuthProviders.Google,
        method: AuthMethods.Redirect
    }),
    // { provide: XHRBackend, useClass: InMemoryBackendService }, // in-mem server
    // { provide: SEED_DATA, useClass: InMemoryDataService },      // in-mem server data
    Title,
    AuthGuard,
    MdIconRegistry,
    disableDeprecatedForms(),
    provideForms(),
    ChartsService,
    SpinnerService,
    LogService,
    appConfig(DEFAULT_APP_CONFIG)
]).then(
    () => window.console.info('Angular finished bootstrapping your application!'),
    (error) => {
        console.warn('Angular was not able to bootstrap your application.');

apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  storageBucket: 'YOUR_STORAGE',
  messagingSenderId: "YOUR_MSGINGID"
};

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule, // imports firebase/database, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    PictureUtils,
    Camera,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

FooterComponent,
    PinsComponent,
    PinItemComponent,
    PinDetailComponent,
    ModalComponent,
    PinEditComponent,
    PinCommentComponent,
    PinCommentNewComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    AppRoutes,
    AngularFireModule.initializeApp(firebaseConfig, {
      provider: AuthProviders.Google,
      method: AuthMethods.Popup
    }),
    RouterModule.forRoot(routes),
    StoreModule.provideStore(reducer, {
      router: {
        path: window.location.pathname + window.location.search
      }
    }),
    // StoreDevtoolsModule.instrumentOnlyWithExtension(),
    RouterStoreModule.connectRouter(),
    EffectsModule.run(UserAuthEffects),
    EffectsModule.run(PinEffects),
    EffectsModule.run(CommentEffects),
    EffectsModule.run(NotificationEffects),
    MasonryModule,

import { LoginComponent } from './storefront-components/login/login.component';

// services
import { GlobalService } from './services/global.service';
import { WindowRefService } from "./services/window-ref.service";
import { LocalCartService } from "./services/localcart.service";

// directives
import { StopPropagationDirective } from './directives/stop-propagation.directive';

firebase.initializeApp(environment.firebase);

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase, 'firebase-cms'),
    AngularFireDatabaseModule,
    AngularFireAuthModule,
    BrowserAnimationsModule,
    FormsModule,
    AppRoutingModule,
    MaterialComponentsModule,
    SharedModule,
  ],
  declarations: [
    AppComponent,
    CartComponent,
    CartIconComponent,
    CheckoutShippingComponent,
    CheckoutBillingComponent,
    CheckoutPaymentComponent,
    CheckoutReviewComponent,

import {FIREBASE_PROVIDERS, defaultFirebase, firebaseAuthConfig, AuthProviders, AuthMethods, FirebaseListObservable} from 'angularfire2';

import {UserService} from './common/user.service';
import {AuthService, User} from './common/auth.service';
import {WebRTCConfig} from './common/webrtc.config';
import {WebRTCService} from './common/webrtc.service';

@App({
    template: '',
    config: {}, // http://ionicframework.com/docs/v2/api/config/Config/
    providers: [
        FIREBASE_PROVIDERS,
        defaultFirebase('https://ng2-webrtc.firebaseio.com/'),
        firebaseAuthConfig({
            provider: AuthProviders.Google,
            method: AuthMethods.Popup,
            remember: 'default',
            scope: ['email']
        }),
        WebRTCConfig, UserService, AuthService, WebRTCService],
})
export class MyApp {
    // We show the fake page here and will change it after success authorization
    rootPage: any = HomePage;

    constructor(platform: Platform, webRTC: WebRTCService, authService:AuthService, userService:UserService) {
        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            StatusBar.styleDefault();
            // Let's sign in first

import {FIREBASE_PROVIDERS, defaultFirebase, firebaseAuthConfig, AuthProviders, AuthMethods, FirebaseListObservable} from 'angularfire2';

import {UserService} from './common/user.service';
import {AuthService, User} from './common/auth.service';
import {WebRTCConfig} from './common/webrtc.config';
import {WebRTCService} from './common/webrtc.service';

@App({
    template: '',
    config: {}, // http://ionicframework.com/docs/v2/api/config/Config/
    providers: [
        FIREBASE_PROVIDERS,
        defaultFirebase('https://ng2-webrtc.firebaseio.com/'),
        firebaseAuthConfig({
            provider: AuthProviders.Google,
            method: AuthMethods.Popup,
            remember: 'default',
            scope: ['email']
        }),
        WebRTCConfig, UserService, AuthService, WebRTCService],
})
export class MyApp {
    // We show the fake page here and will change it after success authorization
    rootPage: any = HomePage;

    constructor(platform: Platform, webRTC: WebRTCService, authService:AuthService, userService:UserService) {
        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            StatusBar.styleDefault();
            // Let's sign in first
            authService.login().then((user: User) => {

AuthProviders,
    AuthMethods
} from 'angularfire2';

@App({
    templateUrl: 'build/app.html',
    config: {}, // http://ionicframework.com/docs/v2/api/config/Config/ 
    providers: [
        Story,
        User,
        Beacons,
        FIREBASE_PROVIDERS,
        defaultFirebase('https://aofs.firebaseio.com/'),
        firebaseAuthConfig({
            provider: AuthProviders.Facebook,
            method: AuthMethods.Popup,
            remember: 'default',
            scope: ['email']
        })
    ]
})
class MyApp {
    // make HelloIonicPage the root (or first) page 
    rootPage: any = Start;
    pages: Array<{ title: string, component: any }>;

    constructor(
        private app: IonicApp,
        private platform: Platform,
        private menu: MenuController
    ) {
        this.initializeApp();