CODEWITHSUNDEEP
angulartypescriptangularfire5
karlmnz
karlmnz

Reputation: 138

@angular/fire: ERROR TypeError: Cannot read property 'firebaseApp' of undefined

I'm using: "@angular/core": "^6.1.0", ... "@angular/fire": "^5.0.2", "firebase": "^5.3.1",

If in my app.modules.ts I have:

import { AngularFireModule } from '@angular/fire';
...
imports: [
...
AngularFireModule.initializeApp(environment.firebase),
...
]

With my firebase config settings in the environments/environment.ts,

And have in my authService 

initAuthListener() {
        this.afAuth.authState.subscribe(user => { ... }
}

Then I get following console errors, and :

ERROR TypeError: Cannot read property 'firebaseApp' of undefined
    at Object.get [as app] (http://localhost:4200/vendor.js:153576:31)
    at http://localhost:4200/vendor.js:162834:9
    at Array.forEach (<anonymous>)
    at deepFreeze (http://localhost:4200/vendor.js:162831:33)
    at http://localhost:4200/vendor.js:162837:7
    at Array.forEach (<anonymous>)
    at deepFreeze (http://localhost:4200/vendor.js:162831:33)
    at http://localhost:4200/vendor.js:162837:7
    at Array.forEach (<anonymous>)
    at deepFreeze (http://localhost:4200/vendor.js:162831:33)

If I then add the optional custom FireBaseApp name to the app.modules.ts as per https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md e.g. AngularFireModule.initializeApp(environment.firebase, 'firebaseApp'), or any alternative custom app name, say '123App'. The console errors go away and the firebase works.

(UPDATE: without touching this code, only updated some firebase functions in another area, now even with custom app name I am getting the error above! What is going on)

Why am I required to have the optional name set for it to work, even though the name can be random and have no real meaning as not used anywhere else in my code?

Also in vscode the app.modules.ts import { AngularFireModule } from '@angular/fire'; has the @angular/fire part error underlined with the msg [ts] cannot find module 'angularfire2', everything works but what is there an @types that i need to include to clear this or has vscode just got a cached issue since I changed from 'angularfire2' to '@angular/fire' recently?

Upvotes: 1

Views: 1170

Answers (1)

karlmnz
karlmnz

Reputation: 138

In the end this was caused by a observable firebase Ref being stored to my Store State as part of the InitAuthLister and then for some reason becoming undefined even though using observable.pipe(take(1).map(...).subscriber(...). I didn't even need the Ref only needed the Id. All solved now.

So take away is be careful where/how you store firebase refs as they will likely go out of scope at some point.

Upvotes: 3

Related Questions