No Firebase App '[DEFAULT]' has been created in Angular 2

Question

Using the Angular 2 CLI, I have the following code:

joinSubmit(){
    var self = this;
    firebase.auth().createUserWithEmailAndPassword(
        'test@test.com', 
        'testpassword'
        )
        .then(function(response){
            var userdetail = {};
            userdetail['/users/'+response.uid] = {
                username: 'test',
                useremail: 'test@test.com'
            };
            firebase.database().ref().update(userdetail);
        });
        this.router.navigate(['profile']);
}

Unfortunately when I run it I get a No Firebase App [DEFAULT] has been created - call Firebase App.initializeApp() error.

My app.module looks like so (obviously with the API keys filled in):

import * as firebase from 'firebase';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AngularFireModule } from 'angularfire2';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { J2InvestRoutingModule } from './app-routing.module';
import { NavigationComponent } from './navigation/navigation.component';
import { JoinComponent } from './join/join.component';
import { SignComponent } from './sign/sign.component';
import { ProfileComponent } from './profile/profile.component';


  export const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    storageBucket: "",
    messagingSenderId: ""
  };

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NavigationComponent,
    JoinComponent,
    SignComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    J2InvestRoutingModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Meanwhile my package.json looks like this:

{
  "name": "j2-invest",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "angularfire2": "^2.0.0-beta.5",
    "core-js": "^2.4.1",
    "firebase": "^3.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}

Do not know how to fix this error. Please advise. Thanks.

UPDATE So the docs have a script here for initializing the Firebase App.

  // Intialize the "[DEFAULT]" App
  var mainApp = firebase.initializeApp({
    // ...
  }); 

How would I incorporate this into my Firebase functions? Like, say, if I had the following code:

runner(){
    var mainApp = firebase.initializeApp({});
    firebase.auth().createUserWithEmailAndPassword('chase', 'myface');    
}

UPDATE

So come to find there seems to be some kind of issue getting my app.module to initialize my Firebase setup. As having a function like this does the trick:

    rest(){

    const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    storageBucket: "",
    messagingSenderId: ""
};

    firebase.initializeApp();
        firebase.auth().createUserWithEmailAndPassword('chevy@chase.com', 'hispassword'); 
    } 

While this works, it also seems hardly ideal to have to type firebase.initializeApp() every time I make a call.

Answer 1

I think this will help you. Initialize app in the main component.

AngularFireModule.initializeApp({
  apiKey: "*******************",
  authDomain: "**********.firebaseapp.com",
  databaseURL: "https://*********.firebaseio.com",
  storageBucket: ""
})

Check the following plunker