Angular 5 - firestore Snapshotchanges "supplied parameters do not match any signature of call target"

[SGissubel]

I have been at this for days... Even was following a course on Udemy to help me get started, and a recent one, Plus all the doc's I looked at, it APPEARS as if I am doing everything correctly...

Below, there is a line where I am getting the snapshotchanges of a collect/doc/collection that I have. I have stored in it. And the line below that (commented out) returns fine, and I can get the valuechanges, but I need the doc.id so that I can update/set new values.

But every-way that I try to organize this, it continues to tell me one of a few things, Mostly: "supplied parameters do not match any signature of call target" (from the snapshot shown below), or references missing parameters such as (["add" | "remove"...]). etc. Either I am definitely way off with something... or Something is wrong.

I even tried the version from the Documents, so no need to post those below. I was getting the same errors...

import { Injectable } from '@angular/core';
import { Response } from '@angular/http';
import { AngularFirestore } from 'angularfire2/firestore';
import { map } from 'rxjs/operators';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';

import { ISnippet } from '../models/snippets.model';
import { AuthService } from '../../login/auth.service';

@Injectable()
export class SnippetsService {
  snippetsAdded = new Subject<ISnippet[]>();
  snippetsExist = new Subject<boolean>();
  snipObserve: Observable<any[]>;
  userID: string;

  constructor(private db: AngularFirestore,
              private router: Router,
              private authService: AuthService) {
    this.userID = this.authService.getUserID();
  }

  fetchAvailableSnippets() {
  }

  createdNewSnippet(snippet: ISnippet) {
    this.storeNewSnippet(snippet);
  }

  fetchCreatedSnippets() {
  const thing = this.db
      .collection('snippets')
      .doc(this.userID)
      .collection<any>('user-snippets');

     // this.snipObserve = thing.snapshotChanges()
     //  .map(result => {
     //    return result.map(doc => {
     //      const data = doc.payload.doc.data as ISnippet;
     //      const id = doc.paylod.doc.id;
     //      return { id, ...data}
     //    })
     //    }
     //  });

this.snipObserve = thing.snapshotChanges()
  .map(results => {
    return results.map((i) => {
      return {
        id = doc.paylod.doc.id,
        ...doc.paylod.doc.data()
      };
    });
   })
  .subscribe(result => {
     for (const res of result) {
       console.log(res.payload.doc.data());
     }
  });

    // this.db
    //   .collection('snippets')
    //   .doc(this.userID)
    //   .collection('user-snippets')
    //   .valueChanges()
    //   .subscribe((snippets: ISnippet[]) => {
    //     this.snippetsAdded.next(snippets);
    //     if (snippets.length) this.snippetsExist.next(true);
    //   });
  }

  updateSnippet(snippet: ISnippet) {
    const selectedSnip = snippet.id;
    this.db.doc<any>(`snippets/${this.userID}/user-snippets/${selectedSnip}`)
      .update(snippet);
  }

  private storeNewSnippet(snippet: ISnippet) {
    const itemId = this.db.createId();
    const createdAt = firebase.firestore.FieldValue.serverTimestamp();
    const item = { ...snippet, id: itemId, created_at: createdAt};
    this.db.collection('snippets').doc(this.userID).collection('user-snippets').add(item);
    if (!snippet.private) this.storePublicSnippet(snippet);
    else this.router.navigate(['dashboard']);
  }

  private storePublicSnippet(snippet: ISnippet) {
    this.db.collection('snippets').doc('public_snippets').collection('snippets').add(snippet);
    this.router.navigate(['dashboard']);
  }

}

[houfu]

Hi, the new screenshot suggests that the firestore permissions are not set correctly (an unauthorised user is not able to read data) but this is not related to the original "supplied parameter" error.

When I read the original code example, I find that there are a lot of typos in them. I think you have to go through it line by line 😞

[SGissubel]

Hey @houfu, thank you for your response. I know that the above code is not perfect. As I mentioned, this is simply one iteration of 10's that I attempted. Each one returns the exact same response.

Please see the image below, it is a screen shot of code directly from the Udemy course I was taking. It shows the exact same error in my IDE.

[houfu]

@SGissubel I think it would help if you provided your code.

[SGissubel]

@houfu

https://github.com/SGissubel/code-scissors

file located in src/app/dashboard/services/snippets.service.ts

When you have logged in -- it runs the fetch (where the code breaks). Which is fine, because at first you will have nothing to fetch. But after you create a 'snippet', it should load the fetch again. This is where it should return the values and should of course return the created id to access each saved item -- for later editing/deleting purposes. But it never makes it past the snapshotChanges().

[houfu]

Hi I've cloned your project and I do not see the error. Building it seems fine too.

When you have logged in -- it runs the fetch (where the code breaks). Which is fine, because at first you will have nothing to fetch. But after you create a 'snippet', it should load the fetch again. This is where it should return the values and should of course return the created id to access each saved item -- for later editing/deleting purposes. But it never makes it past the snapshotChanges().

From what I can tell in snippets.service.ts, you've mapped your observable but haven't subscribed to it. So nothing is being done to the underlying data.

[SGissubel]

@houfu
Correct. It does nothing. There is no error... but also, I assume it didn't log the return data, because it never gets that far.
The subscribe is inside of that service, commented out. If you uncomment it, it should not reach that either, because it never makes it past that map function.

[SGissubel]

[SGissubel]

I don't know what happened... I swear this didn't work when I tried it... But currently, I am getting back the "payload" inside of the map function (even though my IDE is crazy filled with these errors)

but the subscribe is returning "undefined".

Within the map(), I can retrieve using doc.payload.doc.data();

But subscribe returns an array of undefined's

[SGissubel]

Okay... I'm starting to figure this all out...

fetchCreatedSnippets() {
    this.snippetsAll = [];
    this.db
      .collection('snippets')
      .doc(this.userID)
      .collection('user-snippets')
      .snapshotChanges()
      .map(results => {
        return results.map((snippet) => {
          return {
            id: snippet.payload.doc.id,
              name: snippet.payload.doc.data().name,
              code: snippet.payload.doc.data().code,
              other_tags: snippet.payload.doc.data().other_tags,
              created_at: snippet.payload.doc.data().created_at,
              language: snippet.payload.doc.data().language,
              isprivate: snippet.payload.doc.data().private,
              favorite: snippet.payload.doc.data().favorite
            }
        });
      })
      .subscribe(result => {
        this.snippetsAll.push(result);
        if (result) this.snippetsExist.next(true);
        this.snippetsAdded.next(this.snippetsAll
      });
    

Thank you all for your help and patience

[mskinho]

@SGissubel
Solution:
fetchAvailableExercises() {
this.fbSubs.push(this.db
.collection('availableExercises')
.snapshotChanges().pipe(
map(docArray => {
return docArray.map(doc => {
const data = doc.payload.doc.data() as Exercise;
const id = doc.payload.doc.id;
return {
id, ...data
};
});
}))

[SGissubel]

I'm not really sure I understand the context here - without matching my nomenclature.

Plus that does't 100% apply when you have to go inside of collection, then doc, then collection, etc.

But my last one was how I solved it already.

And I was not using pipes when I created this. Though it's a good note to go back in and update some code!

Cheers!