Angularfire: Firestore - Error: Uncaught (in promise): TypeError: app.firestore is not a function

[cesarsalesgomes]

**Version Info

Angular: ^5.0.2

Firebase: ^4.6.0

AngularFire2: ^5.0.0-rc.3**

I've done all the steps to use AngularFirestore normally, but when i'm instantiating in my constructor service, this error brokes my app.

import { Injectable } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';

@Injectable()
export class ContactFormService {

constructor(
private afs: AngularFirestore
) { }
}

[davideast]

Hi @cesarsalesgomes! Can you create a Stackblitz.com that shows this error? I think there might be an issue with the module setup.

[cesarsalesgomes]

@davideast Hi!
https://github.com/cesarsalesgomes/marina

Git project helps?

This is a server-side rendering app with cloud functions to host my syster-in-law restaurant site.

It's a way to repay her for letting me eat there for free =D

Here's the link:
https://marina-c0b30.firebaseapp.com/

[cesarsalesgomes]

@davideast
https://github.com/cesarsalesgomes/marina/commit/dda1f8aab09a56ccfc36aca5655eb46ddde7a47e

[xjuanc]

I'm currently getting something similar after upgrading but not with Firestore but Firebase instead. Error on image attached.

Any ideas? Couldn't figure out a fix yet.

[WanderG]

I previously had that problem as well after upgrading. But when I started a new project, and installed the exact same versions of angular, firebase and angularfire, the problem went away.
When comparing node_modules, there was minor version difference of a dependency of a dependency.

I suggest removing node_modules, clearing npm cache (npm cache clean) and doing npm install again.

I'm currently on versions: angular 5.1.0, angularfire2 5.0.0-rc.4 and firebase 4.8.0

[xjuanc]

Tried @WanderG suggestion and no luck so far, still the same error appears.

These are my package json dependecies

Am I missing something?

[WanderG]

Don't see anything wrong there. Perhaps something to do with how you import them?

I only had the error when I used auth in an angular guard (for a route with canActivate), I assume you're doing the same?

In my app.module.ts:

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';

@NgModule({
    declarations:[/*Components*/],
    imports:[
        /*Other modules*/
        AngularFireModule.initializeApp(environment.firebase),
        AngularFireAuthModule,
    ],
    providers:[AuthGuard],
    bootstrap:[AppComponent],
})

In my AuthGuard:

import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

public user:Observable<firebase.User>;

constructor(private afAuth:AngularFireAuth){
    this.user = afAuth.authState;
}

canActivate():Observable<boolean>{
    return this.user.map(user => {
        if(user)
            return true;

        this.router.navigate(['/login']);
        return false;
    });
}

You can try starting a new project, copying your package.json and create a minimal app to see if it works there.

[cesarsalesgomes]

My suggestion would be the same as @WanderG, creating a minimal app.

In my situation, i just needed to trigger a cloud function. So, instead of triggering via firestore updating, i called the cloud function rest api directly, and stopped using firestore.

But in another project, I would have to double the attention if I was going to use firestore.

[WanderG]

@xjuanc by bad luck I ran into this exact problem again today.
Only removing node_modules and reinstalling like I said before did not work, however, removing node_modules AND package-lock.json, and then doing npm install, did work, so give that a try

[xjuanc]

Really appreciate your help guys, I did what you suggested and it worked like a charm when doing so in a brand new project, the odd part is there was no difference at all in node modules so what I have done so far is:
1 - Replace node_modules folder on my old project with the one in the brand new project.
2 - Moved the whole project files (Components, services and so) to the new project.
3 - Removed node_modules folder and package-lock file as @WanderG suggested.

• The first one didn't work at all.

• The second one was just... Wrong, you shouldn't have the need to do such thing. Even though it worked and may be a fast patch it just doesn't feels correct to me.

• The third was the REAL solution here. Thanks a lot to @WanderG for sharing it, it did fix the problem completely on the original project. I guess it was an error between dependencies or something like that.

Anyway, problem fixed with the last solution provided by @WanderG.

Hope you all enjoy christmas!

[Splaktar]

I was getting this error on 5.0.0-rc.10. Rolling back to 5.0.0-rc.9 solved it for me.