NullInjectorError: No provider for InjectionToken FirebaseAppConfigToken!

I’ve been busy all night to get firebase working in my Angular 5 application. I’ve been bouncing from Stackoverflow to Github, and back, but with no solution for something seemingly basic usage.

Just to get it to work, I’ve created a blank project using ng new, and getting firebase to work. No fancy stuff, just basic this.example = this.db.list('example'); and then showing it on my page. No such luck.

I’ve tried:

• https://github.com/angular/angular/issues/20101
• https://github.com/angular/angularfire2/issues/1155
• https://github.com/angular/angular/issues/20339
• Probably way more, but I can’t recall/list em all

Angular: ^5.0.0 Firebase: 4.8.2-0 AngularFire: 5.0.0-rc.5-next

How to reproduce these conditions

Steps to set up and reproduce

I’ve created a new project using ng new AngFir, the adding the above mentioned dependencies. Or https://github.com/Endran/AngFireIssues and run npm i, npm start

Sample data and security rules

export const firebaseCredentials = {
  apiKey: 'AIzaSyBJ13iD-f2jHlu47iVTpGBm-Hr6YXyh4mw',
  authDomain: 'bittipper-edd0a.firebaseapp.com',
  databaseURL: 'https://bittipper-edd0a.firebaseio.com',
  projectId: 'bittipper-edd0a',
  storageBucket: 'bittipper-edd0a.appspot.com',
  messagingSenderId: '992375349823'
};

Rules:

{
  "rules": {
      ...
      "example": {
    		".read": true,
      }
  }
}

Debug output

** Errors in the JavaScript console **

ERROR Error: StaticInjectorError[InjectionToken FirebaseAppConfigToken]: 
  StaticInjectorError[InjectionToken FirebaseAppConfigToken]: 
    NullInjectorError: No provider for InjectionToken FirebaseAppConfigToken!
    at _NullInjector.get (core.js:993)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveNgModuleDep (core.js:10878)
    at _callFactory (core.js:10942)
    at _createProviderInstance$1 (core.js:10892)
View_AppComponent_0 @ AppComponent.html:9
proxyClass @ compiler.js:14647
DebugContext_.logError @ core.js:15030
ErrorHandler.handleError @ core.js:1488
(anonymous) @ core.js:5683
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4701
(anonymous) @ core.js:5683
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4753
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
(anonymous) @ zone.js:870
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4744
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:594
Promise resolved (async)
scheduleMicroTask @ zone.js:577
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
ZoneAwarePromise.then @ zone.js:978
PlatformRef.bootstrapModule @ core.js:5569
(anonymous) @ main.ts:11
../../../../../src/main.ts @ main.bundle.js:74
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:89
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
AppComponent.html:9 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 10, nodeDef: {…}, elDef: {…}, elView: {…}}
View_AppComponent_0 @ AppComponent.html:9
proxyClass @ compiler.js:14647
DebugContext_.logError @ core.js:15030
ErrorHandler.handleError @ core.js:1493
(anonymous) @ core.js:5683
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.js:4701
(anonymous) @ core.js:5683
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4753
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
(anonymous) @ zone.js:870
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4744
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:594
Promise resolved (async)
scheduleMicroTask @ zone.js:577
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:868
ZoneAwarePromise.then @ zone.js:978
PlatformRef.bootstrapModule @ core.js:5569
(anonymous) @ main.ts:11
../../../../../src/main.ts @ main.bundle.js:74
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:89
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
main.ts:12 Error: StaticInjectorError[InjectionToken FirebaseAppConfigToken]: 
  StaticInjectorError[InjectionToken FirebaseAppConfigToken]: 
    NullInjectorError: No provider for InjectionToken FirebaseAppConfigToken!
    at _NullInjector.get (core.js:993)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveNgModuleDep (core.js:10878)
    at _callFactory (core.js:10942)
    at _createProviderInstance$1 (core.js:10892)

** Output from firebase.database().enableLogging(true); ** N/A

Expected behavior

A working page, with some test data from firebase

Actual behavior

Blank page with fore mentioned errors

[nueko]

@sarojrout maybe you forgot to import the AngularFireDatabaseModule

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { environment } from '../environments/environment';

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

//app.component.ts
import { Component } from '@angular/core';
import { AngularFireDatabase} from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@component({
selector: 'app-root',
template: `{{ message | json }}`}) 
export class AppComponent { items: Observable; constructor(db: AngularFireDatabase) { this.items = db.list('messages').valueChanges(); } } 

[iyushaw]

I had similar error but was solved after I imported the AngularFireModule.initializeApp(environment.firebase), properly