Integration with AngularFire2

This page shows how to integrate angularfire2 into the seed.

1. Install angularfire2 and firebase:

npm i angularfire2 firebase

2. Install typings for firebase:

typings install firebase --save --ambient

3. Inside toos/config/project.config.ts set the following configuration:

SYSTEM_CONFIG_DEV = {
  defaultJSExtensions: true,
  packageConfigPaths: [`${this.APP_BASE}node_modules/*/package.json`],
  paths: {
    [this.BOOTSTRAP_MODULE]: `${this.APP_BASE}${this.BOOTSTRAP_MODULE}`,
    'angular2/*': `${this.APP_BASE}angular2/*`,
    'rxjs/*': `${this.APP_BASE}rxjs/*`,

     // The only change is here
    'firebase': '/node_modules/firebase/lib/firebase-web',

    '*': `${this.APP_BASE}node_modules/*`
  },
  packages: {
    angular2: { defaultExtension: false },
    rxjs: { defaultExtension: false }
  }
};

and the systemjs builder config as follows:

SYSTEM_BUILDER_CONFIG = {
  defaultJSExtensions: true,
  paths: {
    [`${this.TMP_DIR}/*`]: `${this.TMP_DIR}/*`,
    'rxjs/*': `node_modules/rxjs/*`,
    'angular2/*': `node_modules/angular2/*`,
    'firebase': 'node_modules/firebase/lib/firebase-web.js',
    'angularfire2': `node_modules/angularfire2/angularfire2.js`,
  }
};

4. Use angularfire2!

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';
import {NavbarComponent} from './navbar.component';
import {ToolbarComponent} from './toolbar.component';
import {HomeComponent} from '../../home/components/home.component';
import {AboutComponent} from '../../about/components/about.component';
import {NameListService} from '../../shared/services/name-list.service';

import * as AngularFire2 from 'angularfire2';

@Component({
  selector: 'sd-app',
  viewProviders: [NameListService],
  moduleId: module.id,
  templateUrl: './app.component.html',
  directives: [ROUTER_DIRECTIVES, NavbarComponent, ToolbarComponent]
})
@RouteConfig([
  { path: '/',      name: 'Home',  component: HomeComponent  },
  { path: '/about', name: 'About', component: AboutComponent }
])
export class AppComponent {}