Angular2MdlFirebase

This is a demo Angular 2 app based on angular2-mdl and angularfire2, click here to see a demo

This project was generated with angular-cli version 1.0.0-beta.18.

Installing angular-cli

npm install -g angular-cli

Generating and serving an Angular2 project via a development server

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Adding project to github repository

git remote add origin git@github.com:your-account/your-repository.git
git push -u origin master

Installing AngularFire2

npm install firebase angularfire2 --save

Setup @NgModule

Open /src/app/app.module.ts, inject the Firebase providers, and specify your Firebase configuration. This can be found in your project at the Firebase Console:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';

// Must export the config
export const firebaseConfig = {
  apiKey: '<your-key>',
  authDomain: '<your-project-authdomain>',
  databaseURL: '<your-database-URL>',
  storageBucket: '<your-storage-bucket>'
};

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Inject AngularFire

Open /src/app/app.component.ts, and make sure to modify/delete any tests to get the sample working (tests are still important, you know):

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({

  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  constructor(af: AngularFire) {

  }
}

Troubleshooting

1. Cannot find namespace 'firebase'.

If you run into this error while trying to invoke ng serve, open src/tsconfig.json and add the "types" array as follows:

{
  "compilerOptions": {
    ...
    "typeRoots": [
      "../node_modules/@types"
    ],

    // ADD THIS
    "types": [
      "firebase"
    ]
  }
}

2. Cannot find name 'require' (This is just a temporary workaround for the Angular CLI).

If you run into this error while trying to invoke ng serve, open src/typings.d.ts and add the following two entries as follows:

declare var require: any;
declare var module: any;

Instaling angular2-mdl

npm install angular2-mdl --save

Init Firebase

Run firebase init and follow instructions

Deploying

ng build
firebase deploy

Other

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Deploying to Github Pages

Run ng github-pages:deploy to deploy to Github Pages.

Further help

To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.