Unable To Call Some Functions On AngularFirestoreCollections With AngularFire And Ionic

I am experimenting with AngularFire and Ionic. I am trying to follow along with a few tutorials I have found and am trying to model a service I am making based almost 100% off of the example found on the current AngularFire example from their github. The problem that I am having is that anytime I make a collection, none of the methods such as .add(), where(), or snapshotChanges() seem to be working. On my WebStorm IDE they are red saying that the methods are unresolved.

I am not sure whether this could be a versioning thing or if my imports are wrong or just maybe I am reading some wrong information. I have seen quite a few example projects/tutorials and this particular pattern I am looking at seems quite common which is confusing to me. Also I just deleted node modules and ran a fresh npm install. If anyone could help me/point me in the right direction that would be great! Thanks.

Here is some of the relevant files:


import {AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore'
import {Injectable} from "@angular/core";
import 'firebase/storage';
import {Observable} from "rxjs";
import {map} from "rxjs/internal/operators";

 * Created by Ben on 12/26/2018.

export interface User {
  displayName: string;
export interface UserId extends User {
  id: string

export class UserService {

  private usersCollection: AngularFirestoreCollection;
  private users: Observable<UserId[]>;

  constructor(public db: AngularFirestore) {
    this.usersCollection = db.collection('users');
    this.users = this.usersCollection.snapshotChanges().pipe(
      map(actions => {
        return => {
          const data = as User;
          const id =;
          return {id,};

  saveUser(idToken: string, user: User) {
   return this.usersCollection.doc('idToken').add({
     displayName: user.displayName

    return this.usersCollection.where("displayName", "===", displayName);



import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFirestoreModule } from 'angularfire2/firestore';

import { MyApp } from './app.component';
import {FIREBASE_CONFIG} from "./app.firebase.config";
import {AuthService} from "../services/authservice";
import {HouseService} from "../services/houseservice";
import {UserService} from "../services/userservice";

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}


  "name": "firebaseauth",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.17.0",
    "@ionic-native/splash-screen": "~4.17.0",
    "@ionic-native/status-bar": "~4.17.0",
    "@ionic/storage": "2.2.0",
    "angularfire2": "^5.1.1",
    "firebase": "^5.7.1",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "promise-polyfill": "^8.1.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  "devDependencies": {
    "@ionic/app-scripts": "3.2.1",
    "typescript": "~2.6.2"
  "description": "An Ionic project"



You found the right documentation, but it looks like you're getting a couple wires crossed. You are calling the .add() method on the wrong thing, it's supposed to be on the overall collection, and you are trying to use it on an individual document.

From the link you gave, notice this (truncated) code uses .add() on the collection:

constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<Item>('items');
addItem(item: Item) {

Where as you are trying on an individual document:


If you are trying to add a new document to this collection, just use .add() to the collection.

On the other hand, if you are trying to add details to an individual document, then check out this documentation on AngularFire2, as well as the base Firebase documentation which shows you have .set(), .update(), .get(), and .delete() available for interacting with documents.

As to your problem with .where()...

You're also not using the correct syntax for the where clause, check out this doc on querying collections where they provide this example of the correct syntax:

afs.collection('items', ref => ref.where('size', '==', 'large'))

So yours should be:

return afs.collection('users', ref => ref.where('displayName', '==', displayName));