$ ng new project_name --style sass --routing true
$ cd project_name
$ ng serve --open
At this point will depend a lot on the requirements of the project.
$ npm install bootstrap@3 jquery firebase angularfire2 --save
"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
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 {}