Angularfire: TypeError: app.firestore is not a function after updating to firebase 5.5.0

[mazlano27]

Angular:
6.1.7

Firebase:
5.5.0

AngularFire:
5.0.0

* Errors in the JavaScript console *
TypeError: app.firestore is not a function
at firestore.js:22
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:3783)
at new AngularFirestore (firestore.js:20)
at _createClass (core.js:8431)
at _createProviderInstance (core.js:8393)
at resolveNgModuleDep (core.js:8356)
at _createClass (core.js:8421)
at _createProviderInstance (core.js:8393)

* Screenshots *

Expected behavior

Angular application should bootstrap successfully.

Actual behavior

Application does not run at all.

I have tried to clean my npm cache, delete all node modules and re-installing all dependencies with no luck. I should note everything was working fine before I upgraded to firebase 5.5.0 and now even when i revert back to previous version 5.4.2 -> I am still getting this error.

Update: Managed to revert back 5.4.2 successfully.

[davideast]

Hi @mazlano27! Can you show your imports in your app module?

[mazlano27]

Hi @davideast, it's as follows:

imports: [
BrowserModule,
BrowserAnimationsModule,
MaterialModule,
FlexLayoutModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule,
AngularFireAuthModule,
Routing,
FormsModule,
ReactiveFormsModule,
HttpClientModule
]

[Wordenskjold]

Hi @mazlano27! What version of rxjs are you running? The new version of AngularFire requires rxjs v6, which was not the case previously.

[mazlano27]

@Wordenskjold In this project, i'm using rxjs v6.3.2

[andipaetzold]

I had the same issue after upgrading firebase to version 5.5.0. I am not fully sure what caused the bug but deleting and regenerating package-lock.json fixed it for me.

[buzzware]

I've got this problem with 5.5.7. Deleting package-lock.json then npm install did not fix it for me. I'm not using Angular or RxJS.
UPDATE: removing node_modules and package-lock.json then npm install did fix it for me

[davvoz]

The solution that works for me is
package.json -> dependecies -> "firebase":"^5.5.0"

[gilcreque]

I just had a group of students setting up Angular and Firebase and ran across this error. Any word on getting a fix?

What was put in package.json from following the tutorial: "firebase": "^5.8.3",
I had them put in: "firebase": "^5.4.2",, delete the node_modlues folder and package-lock.json, and run npm install ` again. It worked like charm.

[yglin]

Bumped into this problem today, also solved it by

1. Delete node_modules and package-lock.json
2. npm install again.

By the way, my firebase version is the same 5.9.0 before and after the solution.
So... Don't really know what the problem is...

[gilcreque]

@jamesdaniels Was this resolved?

[jamesdaniels]

@gilcreque seems like people have found work arounds here or at least have isolated it as a problem out of scope of AngularFire. Probably something with peer deps or node modules just being messed up. Good ol' rm -rf node_modules bugfix. Happy to reopen if we have a repro & can identify the issue is with AngularFire.

[jamesdaniels]

FWIW Firebase JS SDK has had a couple minor issues like this pop up which have been resolved in patches.

[ybarbaria]

I have the same issue on my heroku server, I cleaned the cache and still the same problem.

[cesarvega]

Just import AngularFirestoreModule, ad it will fix it; I'm using angular 8

imports : [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
RouterModule.forRoot(appRoutes),
ToastrModule.forRoot(),
TranslateModule.forRoot(),

    // Material moment date module
    MatMomentDateModule,

    // Material
    MatButtonModule,
    MatIconModule,

    // Fuse modules
    FuseModule.forRoot(fuseConfig),
    FuseProgressBarModule,
    FuseSharedModule,
    FuseSidebarModule,
    FuseThemeOptionsModule,

    // App modules
    LayoutModule,
    AuthModule,
    UserInfoModule,
    ConnectionsModule,

     // firebase
     AngularFireModule.initializeApp(environment.firebaseConfig),
     **_AngularFirestoreModule,_**
     AngularFireDatabaseModule,
     AngularFireAuthModule,
     DynamicProfileModule
],

[amanjain325]

Use externalDependencies = [ "@firebase/app", "@firebase/firestore" ] in angular.json file

Below is the code.

"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/market-web/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json",
"externalDependencies": [
"@firebase/app",
"@firebase/firestore"
]
},
.....