search

angular / angularfire

Angular + Firebase = ❤️
https://firebaseopensource.com/projects/angular/angularfire2
MIT License
7.67k stars 2.19k forks source link

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

Closed mazlano27 closed 5 years ago

mazlano27 commented 5 years ago

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

screen shot 2018-09-17 at 4 05 30 pm

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 commented 5 years ago

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

mazlano27 commented 5 years ago

Hi @davideast, it's as follows:

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

Wordenskjold commented 5 years ago

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

mazlano27 commented 5 years ago

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

andipaetzold commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

gildotdev commented 5 years ago

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 commented 5 years ago

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...

gildotdev commented 5 years ago

@jamesdaniels Was this resolved?

jamesdaniels commented 5 years ago

@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 commented 5 years ago

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

ybarbaria commented 5 years ago

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

cesarvega commented 5 years ago

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 commented 3 years ago

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" ] }, .....