Skip to content

Instantly share code, notes, and snippets.

@israeljrs
Created March 16, 2017 19:03
Show Gist options
  • Save israeljrs/dc38fa69cac4e577ac872a5db6aaee4f to your computer and use it in GitHub Desktop.
Save israeljrs/dc38fa69cac4e577ac872a5db6aaee4f to your computer and use it in GitHub Desktop.
step by step to setup angular 2 and firebase.

basic setup to make project using angular 2 and firebase.

create basic project with support to sass.

$ ng new project_name --style sass --routing true

check if project is make rigth.

$ cd project_name
$ ng serve --open

add commons dependencies.

At this point will depend a lot on the requirements of the project.

$ npm install bootstrap@3 jquery firebase angularfire2 --save

add bootstrap and jquery into angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

to test if bootstrap is ok, change the src/app/app.component.html and add into the code below.

<div class="container">
  <div class="jumbotron">
    <h1>Welcome</h1>
    <h2>Angular & Bootstrap Demo</h2>
  </div>
  <div class="panel panel-primary">
    <div class="panel-heading">Status</div>
    <div class="panel-body">
      <h3>{{title}}</h3>
    </div>
  </div>
</div>

run the project to test new configurations.

$ ng serve --open

New setup @NgModule with firebase initialize code.

this point you have generate code into console the firebase. Open src/app/app.module.ts, inject the Firebase providers and add your app specific Firebase configuration.

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>',
  messagingSenderId: '<your-messaging-sender-id>'
};
@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment