Connecting angular to firebase using angularFire2 version 5.0

Question

I seem to be having an error I cant find an answer to. I have searched through readme files and angularFire docs all day. I am getting this error in the console

Error: No provider for InjectionToken FirebaseAppConfigToken!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9492)
    at _callFactory (core.es5.js:9556)
    at _createProviderInstance$1 (core.es5.js:9506)
    at resolveNgModuleDep (core.es5.js:9488)

So I tried including this in app.module.ts import { NgModule, InjectionToken } from '@angular/core'; and listing it in the providers array. I then get the fallowing error....

Uncaught Error: Can't resolve all parameters for InjectionToken: (?).
    at syntaxError (compiler.es5.js:1694)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:15781)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getTypeMetadata (compiler.es5.js:15649)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getInjectableMetadata (compiler.es5.js:15635)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getProviderMetadata (compiler.es5.js:15926)
    at compiler.es5.js:15855
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver._getProvidersMetadata (compiler.es5.js:15815)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15470)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26826)

I'm not using any of the firebase authorization methods. I'm just simply trying to connect to my firebase database and play around with it.

I'd also like to mention that I did set the read write rules in the firebase console to true, so I don't think thats the issue. I also included my firebaseConfig object in the environments/environment.prod.ts and environments.ts files. Which I then passed into the imports array of app.module.ts like this AngularFireModule.initializeApp(environment.firebase)

I'd be grateful if anyone could help shed some light on this topic for me. Thanks!

Update:

I figured id include my app.module.ts and app.component.ts files to help.

app.module.ts

import { InjectionToken } from '@angular/core';
// Modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
// Firebase Modules
import { AngularFireModule } from 'angularFire2';
import { AngularFireAuthModule } from 'angularFire2/auth';
import { AngularFirestoreModule, AngularFirestore } from 'angularfire2/firestore';
// Components
import { AppComponent } from './app.component';
// Services
// environment
import { environment } from './../environments/environment';

// testing firebase config options environment param
console.log(environment.firebase);

// Set up like the example from the angualrFirebase install guide
// https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md#6-setup-individual-ngmodules

// I kept this project as simple as possible to focus on..
// Debugging the firebase and angularFire2 issue I'm experiencing.
// Even after trying to emulate the example use code from the angularFire2 repo,
// I'm still experiencing the same error.

// ERROR Error: No provider for InjectionToken FirebaseAppConfigToken!

// If I include InjectionToken as a provider I get the other error I was experiencing

// Uncaught Error: Can't resolve all parameters for InjectionToken: (?).

// Including angularFirestore as a provider throws a different error...
// I dont think I should have to list any providers though from what I can gather form the
// angularFire2 docs

// Uncaught Error: Can't resolve all parameters for AngularFirestore: ([object Object], ?).

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AngularFireModule.initializeApp(environment.firebase, 'test-blog-app'),
    AngularFirestoreModule,
    AngularFireAuthModule
  ],
  providers: [
    // AngularFirestore,
    // InjectionToken
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

// This file is based off of the angularFire github repository
// https://github.com/angular/angularfire2#example-use

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let post of posts | async">
      {{ post.title }}
    </li>
  </ul>
  `
})
export class AppComponent {
  posts: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.posts = db.collection('posts').valueChanges();
  }
}

Answer 1

I was trying to import from angularFire instead of angularfire.

import { AngularFireModule } from 'angularFire2';
import { AngularFireAuthModule } from 'angularFire2/auth';

Should Have been

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';

I believe this was the actual error. This also fixed the ng serve warning I was getting. Thanks guys.