Integration with Firebase - mgechev/angular-seed GitHub Wiki

This page shows how to integrate firebase ([email protected]) into the seed.

1. Install angularfire2 and firebase:

npm install --save firebase
npm install --save-dev @types/[email protected]

• package.json will be

[...]
  "dependencies": {
    [...]
    "firebase": "^3.6.4",
    [...]
  }
[...]

2. In tools/config/project.config.ts, inside the ProjectConfig constructor:

constructor() {
...
    // Add Firebase configuration to SystemJS
    this.addPackageBundles({
      name: 'firebase',
      path: 'node_modules/firebase/',
      packageMeta: {
        main: 'firebase-browser.js',
        defaultExtension: 'js'
      }
    });
...
}

3. Add it to files in karma.conf.js for enabling testing with firebase:

    files: [
      ...
      // Insert it after angular dependencies

      //Firebase
      { pattern: 'node_modules/firebase/**/*.js', included: false, watched: false },
      ...
    ],

4. Add it to your app component at src/client/app/app.component.ts:

import * as firebase from "firebase";

@Component({
  moduleId: module.id,
  selector: 'sd-app',
  templateUrl: 'app.component.html',
})

export class AppComponent {
  constructor() {
  	const firebaseConfig = {
	    apiKey: "xxx",
	    authDomain: "xxx",
	    databaseURL: "xxx",
	    storageBucket: "xxx",
	    messagingSenderId: "xxx"
	}
	firebase.initializeApp(firebaseConfig);
  }

5. Use firebase in your code

import * as firebase from "firebase";

export class DataAccess {
   ...

6. Example (Firebase Authentication)

Git: https://github.com/GoEngin/GoEnginO

Demo: https://goengin-a784e.firebaseapp.com