Angularfire: NullInjectorError: No provider for InjectionToken FirebaseAppConfigToken!

Created on 10 Jan 2018 · 11Comments · Source: angular/angularfire

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

Source

Endran

Most helpful comment

@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(); } }

nueko on 12 Jan 2018

👍4

All 11 comments

Hi @Endran! I'll need to see your AppModule code to tell how you are importing AngularFire.

Also, if you could create a stackblitz repro that would be really helpful.

davideast on 11 Jan 2018

I'll see if I can get on stackblitz tomorrow morning, for now, please see https://github.com/Endran/AngFireIssues/blob/master/src/app/app.module.ts

Endran on 11 Jan 2018

Hello @Endran you need to see this
import {AngularFireModule} from 'angularFire2';
notice the 'angularFire2' with uppercase F

nueko on 11 Jan 2018

also, replace line#17

this.example = this.db.list('example');

this.example = this.db.list('example').valueChanges();

nueko on 11 Jan 2018

hey @nueko and @davideast, still its not gonna work. i am also facing the same issue. I am just following the documentation https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md. And here is the sample app.module.ts and app.component.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase)

],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

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

@Component({
selector: 'app-root',
template: <ul> <li *ngFor="let message of messages | async"> {{ message | json }} </li> </ul>,
})
export class AppComponent {
items: Observable constructor(db: AngularFireDatabase) {
this.items = db.list('messages').valueChanges();
}
}
And am getting the below error
RNING in ./~/angularfire2/firebase.app.module.js
3:40-54 "export 'InjectionToken' was not found in '@angular/core'

WARNING in ./~/angularfire2/angularfire2.js
4:26-40 "export 'InjectionToken' was not found in '@angular/core'

ERROR in /Users/sarojkumar/demo_angular/SampleChat/node_modules/firebase/app/index.d.ts (167,9): Type expected.

ERROR in /Users/sarojkumar/demo_angular/SampleChat/node_modules/firebase/app/index.d.ts (174,9): Type expected.

ERROR in /Users/sarojkumar/demo_angular/SampleChat/node_modules/firebase/app/index.d.ts (570,9): Type expected.

ERROR in /Users/sarojkumar/demo_angular/SampleChat/node_modules/firebase/app/index.d.ts (1587,5): Type expected.

ERROR in /Users/sarojkumar/demo_angular/SampleChat/node_modules/angularfire2/firebase.app.module.d.ts (1,10): Module '"/Users/sarojkumar/demo_angular/SampleChat/node_modules/@angular/core/index"' has no exported member 'InjectionToken'.

ERROR in /Users/sarojkumar/demo_angular/SampleChat/node_modules/angularfire2/angularfire2.d.ts (2,10): Module '"/Users/sarojkumar/demo_angular/SampleChat/node_modules/@angular/core/index"' has no exported member 'InjectionToken'.

ERROR in /Users/srout/demo_angular/SampleChat/node_modules/angularfire2/database/interfaces.d.ts (19,18): Cannot find name 'Partial'.

sarojrout on 12 Jan 2018

@nueko , thanks! That .valueChanges(); was a sloppy mistake, I didn't see it yet since the app didn't start yet.

However that uppercase F was the actual problem! IntelliJ for some reason is able work with the uppercase F, and the typescript compiler as well. Only at Runtime did this occur. Shouldn't the typescript compiler or linter pick this up ideally?

Endran on 12 Jan 2018

👍1

@sarojrout I've pushed my fixes, please try to build and run my example to see if it works for you.

Endran on 12 Jan 2018

@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(); } }

nueko on 12 Jan 2018

👍4

@sarojrout and maybe you want to read this
https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown

nueko on 12 Jan 2018

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

iyushaw on 8 Apr 2018

🎉1 👍1

Folks, follow what was good for me:

app.module.ts

    import { HttpClient, HttpHandler } from '@angular/common/http';
    import { AngularFireDatabaseModule } from 'angularfire2/database';

   imports: [
            AngularFireDatabaseModule,

]

   providers: [ StatusBar,
                      SplashScreen,
       {provide: HttpHandler, useClass: IonicErrorHandler},
                      HttpClient,

]