Integration with AngularFire2

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

1. Install angularfire2 and firebase:

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

2. Add angularfire2 to the types for the dependencies in src/client/tsconfig.json:

"types": [
  "core-js",
  "express",
  "jasmine",
  "node",
  "protractor",
  "systemjs",
  "angularfire2"
]

3. 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'
      }
    });

    // Add AngularFire configuration to SystemJS
    this.addPackageBundles({
      name: 'angularfire2',
      path: 'node_modules/angularfire2/bundles/angularfire2.umd.js',
      packageMeta: {
        main: 'angularfire2.js',
        defaultExtension: 'js'
      }
    });
...
}

4. Add it to files in karma.conf.js for enabling testing with angularfire2:

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

      //Firebase and AngularFire2
      { pattern: 'node_modules/firebase/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/angularfire2/bundles/angularfire2.umd.js', included: false, watched: false },
      ...
    ],

5. Add it to your app module at src/client/app/app.module.ts:

import { AngularFireModule } from 'angularfire2';

const FIREBASE_APP_CONFIG = {
  apiKey: '<->',
  authDomain: '<->',
  databaseURL: '<->',
  storageBucket: '<->',
};

...

@NgModule({
  imports: [
    ...
    AngularFireModule.initializeApp(FIREBASE_APP_CONFIG),
    ...
  ],
  declarations: [AppComponent],
  providers: [{
    provide: APP_BASE_HREF,
    useValue: '<%= APP_BASE %>'
  }],
  bootstrap: [AppComponent]
})

export class AppModule { }

6. Use AngularFire2 in you code and tests!