Angularfire: Error: No provider for InjectionToken FirebaseAppConfigToken!

[ZuSe]

Version info

Angular:
4.1.1

Firebase:
3.9.0

AngularFire:
4.0.0-rc0

Other (e.g. Ionic/Cordova, Node, browser, operating system):
Firefox 52 on Ubuntu 16.04 LTS, node 6.10.3

1. Create a new angular project
2. Create a component that injects a service that injects itself angularfire
3. Try to open the component in a angular material dialog.

Debug output

* Errors in the JavaScript console *
ERROR Error: Uncaught (in promise): Error: No provider for InjectionToken FirebaseAppConfigToken!
injectionError@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:1238:86 [angular]
noProviderError@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:1276:12 [angular]
ReflectiveInjector_.prototype._throwOrNull@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:2777:19 [angular]
ReflectiveInjector_.prototype._getByKeyDefault@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:2816:20 [angular]
ReflectiveInjector_.prototype._getByKey@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:2748:20 [angular]
ReflectiveInjector_.prototype.get@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:2617:16 [angular]
get@ng:///AppModule/module.ngfactory.js:51:95 [angular]
get@ng:///AppModule/module.ngfactory.js:56:52 [angular]
get@ng:///AppModule/module.ngfactory.js:461:64 [angular]
anonymous/AppModuleInjector.p…
Stack trace:
[object Object]

* Output from firebase.database().enableLogging(true); *

* Screenshots *

Expected behavior

The component renders

Actual behavior

Error is thrown and angular app crashes

[davideast]

@ZuSe Can you create a plnkr reproducing this problem?

[ZuSe]

@davideast Should be possible. Is there any template for 4.0?

I spent some time this morning on the issue and figured out that everythings works when I don't use the umd bundle in my system.js config

BEFORE

        // ANGULARFIRE 2
        additionalPackages.push({
            name: 'angularfire2',
            path: `${this.NPM_BASE}angularfire2/bundles/angularfire2.umd.js`,
            packageMeta: {
              main: 'bundles/angularfire2.umd.js',
                defaultExtension: 'js'
            }

AFTER (WORKING):

     // ANGULARFIRE 2
        additionalPackages.push({
            name: 'angularfire2',
            path: `${this.NPM_BASE}angularfire2/angularfire2.js`,
            packageMeta: {
              main: 'angularfire2.js',
                defaultExtension: 'js'
            }
        });

Maybe it gives you already an idea what my cause it. There is defenitly some problem when generating the bundle (missing export etc.) .

[sghaleb1]

This happened to me, it turned out I forgot to add the firebase config.

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

[AlvaroRM88]

@sghaleb1 Where exactly you add firebase config? I have add the config in /src/environments/environment.ts, but I'm having the same problem of InjectionToken

[sghaleb1]

@AlvaroRM88 in the app.module.
then declare it like so imports: [AngularFireModule.initializeApp(firebaseConfig)]

[AlvaroRM88]

@sghaleb1 Thx for the answer, but I think my error is relationated with the version of angular cli and and firebase2.

[thorizer]

I have the same problem when trying to add my firebase database as a provider instead of inside my app.module.ts.
the problem is I need 2 providers since I have 2 databases in the same projects and I can only put one single config in app.module.ts.

[superstarmcawesome]

same problem here. injecting af-module in app-module. also tried all steps above. no success yet... any ideas? angular 4.1.3, firebase 4.1.2

[MarinoRaul]

Any solution?

[rahultyagiji]

I was able to solve it by updating angular core... I will post the working version number combinations later today.

[MarinoRaul]

Please post it because I have 4.2.5
I known that this is the last version

Thanks

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: rahultyagiji [e-mail]
Sent: Tuesday, July 4, 2017 10:51:09 PM
To: angular/angularfire2
Cc: MarinoRaul; Comment
Subject: Re: [angular/angularfire2] Error: No provider for InjectionToken FirebaseAppConfigToken! (#971)

I was able to solve it by updating angular core... I will post the working version number combinations later today.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/angular/angularfire2/issues/971#issuecomment-312977778, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AB5qSwyOf84pl0i6RD8UNSxAEwgXwMP1ks5sKuwNgaJpZM4NZFPP.

[FurkanArslan]

Is there any solution?

[Thara45]

Is there any solution..Still i am struggling with this ..

[kanomtang]

Is the problem on running ng serve or ng test?

[Denisijcu]

Same problem is happening to me when I am tryng to use firestore

[Denisijcu]

in nativescript

[Denisijcu]

I have no problem in Angular 4. Just in Nativescript

[Denisijcu]

$ npm install firebase angularfire2 in angular 4. this should work fine. see this https://alligator.io/angular/cloud-firestore-angularfire/

[DiegoVenancioVieira]

TryAngularFireModule.initializeApp(environment.firebase), in app.module imports

[itszerocode]

I am having same problem... going crazy over this.. please help