Skip to main content

Simple Firebase service for Angular 2

If you want a very simple alternative to Angularfire you may create a firebase service very easily. I made this to avoid extra configuration when it comes to adding npm packages and configuring for bundling. This is done by downloading the scripts from Firebase CDN directly by using a dynamically created script tag.

Once the service is initialized you'll find the database in the public database property, and you just use the regular Firebase API. (Example: this.fbservice.database.ref('someproperty').set(somevalue) - and remember to have fbservice : FireBaseService in your component constructor to inject the service. )

And here's the code for the service:

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';

declare const firebase : any;

const config = {
    apiKey: "",
    authDomain: ".firebaseapp.com",
    databaseURL: "",
    storageBucket: ".appspot.com",
    messagingSenderId: "",
  };
  
@Injectable()
export class FireBaseService {
    public database : any;

    constructor() {
        this.addScript("https://www.gstatic.com/firebasejs/3.7.4/firebase.js")
            .subscribe(() => { 
                firebase.initializeApp(config);
                this.database = firebase.database();
        });
        
        
    }

    private addScript(url : string) : Observable<any> {
        return new Observable((observer : any) => {
            let scr = document.createElement("script");
            scr.src = url;
            scr.onload = () => observer.next(); 
            document.documentElement.appendChild(scr);
        });    
    }
}

Comments

Popular posts from this blog

Angular components not reloading on route change

Spent a long time wondering why route changes caused strange effects on my component, and found out that it was because my component wasn't reloading at all. I had this assumption that when a route parameter changed (e.g. /projects/1 changed to /projects/2 ) the component for the route would be reloaded. But this is not the default behaviour of the Angular router. The default behaviour of the Angular router is to reuse the route if the configuration is the same (and not reload the component). But we can override this by providing a RouteReuseStrategy to our @NgModule: providers: [ { provide: RouteReuseStrategy, useClass: AARouteReuseStrategy } ] The full custom implementation of the RouteReuseStrategy will then be like this (and it's the shouldReuseRoute method that changes the behaviour so that the component is reloaded on route parameter change): export class AARouteReuseStrategy extends RouteReuseStrategy { shouldDetach(route: ActivatedRou...

My VNC based development environment with Visual Studio Code running on Ubuntu

I've used this setup for my development environment for several years - giving me a developer desktop I can access anywhere. Even from my mobile phone. I've been fixing bugs, writing code and deployed emergency fixes from the bus, train and mountain tops. The setup is based on a lightweight desktop environment. There are lot of alternatives, but I've chosen fluxbox. From a plain AWS Amazon Ubuntu 16.04 ec2 instance I've started like this: sudo apt-get update sudo apt-get install fluxbox Download and extract tigervnc from https://github.com/TigerVNC/tigervnc/releases (I downloaded the binary file from https://bintray.com/tigervnc/stable/tigervnc/1.7.0 named tigervnc-1.7.0.x86_64.tar.gz ) then extract: tar -xvzf tigervnc-1.7.0.x86_64.tar.gz You need to install: sudo apt-get install x11-xkb-utils You need to edit .vnc/xstartup: nano .vnc/xstartup last line replace "twm &" with: fluxbox & Then you can start the...

Webassembly and audioworklet

Have been playing a lot recently with webassembly and the upcoming audioworklet web standard. This is exciting and powerful technology, opening up for serious use of the web in production of audio and music. Follow the links from my homepage petersalomonsen.com for live demo and more resources.