title: firestore can't get doc id QuerySnapshot.docChanges has been changed
body: <p>I'm trying to get doc id. I can't find any other way to get this data except for
  snapshotChanges() method which is throwing me error. I don't see any mistakes in code and I can't find any similar problems on forums. When I use valueChanges() there is no problem with getting data. </p>
  
  <p>Error in console</p>
  
  <p><a href="https://i.stack.imgur.com/Iyyve.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Iyyve.png" alt="enter image description here"></a></p>
  
  <p>Base structure</p>
  
  <p><a href="https://i.stack.imgur.com/GnWl8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GnWl8.png" alt="enter image description here"></a></p>
  
  <p>service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
  import { IGallery } from '../interfaces/igallery';
  import { timestamp } from 'rxjs/operator/timestamp';
  
  @Injectable()
  export class GalleriesService {
  
    GalleriesCol: AngularFirestoreCollection&lt;IGallery&gt;;
    galleriesObservable: Observable&lt;any[]&gt;;
  
  // some code
  
   constructor(private db: AngularFirestore) {
      db.firestore.settings({ timestampsInSnapshots: true });
  
      this.galleriesObservable = this.db.collection('galleries').snapshotChanges().map(changes =&gt; {
        return changes.map(a =&gt; {
          const data = a.payload.doc.data() as IGallery;
          data.galleryId = a.payload.doc.id;
          console.log(data);
          return data;
        });
      });
    }
  
  
    getGalleries() {
      return this.galleriesObservable;
    }
  
  // some code
  
  }
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>  getGalleries() {
      this.galleriesService.getGalleries()
        .subscribe(
          data =&gt; {
            this.galleries = data;
            this.galleriesStatic = this.galleries;
            this.setNumberOfPages();
            this.setYearList();
            this.setCurrentPage();
            this.setTags();
            console.log(this.galleries);
          }
        );
      this.currentPage = parseInt(localStorage.getItem('galleryPage'), 10) || 0;
      this.setCurrentPage(this.currentPage);
    }
  
    ngOnInit() {
      this.getGalleries();
    }
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "angular-uczelnia",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build --prod",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "^5.2.0",
      "@angular/cdk": "^5.2.0",
      "@angular/common": "^5.2.0",
      "@angular/compiler": "^5.2.11",
      "@angular/core": "^5.2.0",
      "@angular/forms": "^5.2.0",
      "@angular/http": "^5.2.0",
      "@angular/material": "^5.2.0",
      "@angular/platform-browser": "^5.2.0",
      "@angular/platform-browser-dynamic": "^5.2.0",
      "@angular/router": "^5.2.0",
      "@firebase/app": "^0.1.6",
      "@types/jquery": "^3.3.4",
      "angular2-lightbox": "^1.3.0",
      "angular5-toaster": "^1.0.2",
      "angularfire2": "5.0.0-rc.7",
      "core-js": "^2.4.1",
      "firebase": "^5.2.0",
      "hammerjs": "^2.0.8",
      "jquery": "^3.3.1",
      "lightbox2": "^2.10.0",
      "ng-tags-input": "^3.2.0",
      "ng2-order-pipe": "^0.1.5",
      "ng2-toastr": "^4.1.2",
      "ng2-truncate": "^1.3.11",
      "ng4-tag-input": "^1.0.5",
      "ngx-chips": "^1.9.2",
      "ngx-order-pipe": "^2.0.1",
      "npm-check-updates": "^2.14.2",
      "rxjs": "^5.5.6",
      "uuid": "^3.2.1",
      "webpack": "^3.1.0",
      "zone.js": "^0.8.19"
    },
    "devDependencies": {
      "@angular/cli": "1.7.3",
      "@angular/compiler-cli": "^5.2.0",
      "@angular/language-service": "^5.2.0",
      "@types/jasmine": "~2.8.3",
      "@types/jasminewd2": "~2.0.2",
      "@types/node": "~6.0.60",
      "codelyzer": "^4.0.1",
      "jasmine-core": "~2.8.0",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~2.0.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-cli": "~1.0.1",
      "karma-coverage-istanbul-reporter": "^1.2.1",
      "karma-jasmine": "~1.1.0",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.1.2",
      "ts-node": "~4.1.0",
      "tslint": "~5.9.1",
      "typescript": "~2.5.3"
    }
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I was trying to workaround the problem by updating "angularfire2@5.0.0-rc.7" to "5.0.0-rc.11".</p>
  
  <p>After update:</p>
  
  <pre><code>npm WARN angularfire2@5.0.0-rc.11 requires a peer of @angular/common@^6.0.0     but none is installed. You must install peer dependencies yourself.
  npm WARN angularfire2@5.0.0-rc.11 requires a peer of @angular/core@^6.0.0 but     none is installed. You must install peer dependencies yourself.
  npm WARN angularfire2@5.0.0-rc.11 requires a peer of @angular/platform-    browser@^6.0.0 but none is installed. You must install peer dependencies     yourself.
  npm WARN angularfire2@5.0.0-rc.11 requires a peer of @angular/platform-    browser-dynamic@^6.0.0 but none is installed. You must install peer dependencies     yourself.
  npm WARN angularfire2@5.0.0-rc.11 requires a peer of rxjs@^6.0.0 but none is     installed. You must install peer dependencies yourself.
  </code></pre>
  
  <p>Browser console:</p>
  
  <pre><code>ERROR Error: Uncaught (in promise): TypeError: app.firestore is not a function
  TypeError: app.firestore is not a function
  </code></pre>
  
  <p>So I did: </p>
  
  <pre><code>npm install rxjs@6 rxjs-compat@6 --save
  </code></pre>
  
  <p>But then I got this:</p>
  
  <pre><code>npm WARN @angular/core@4.4.7 requires a peer of rxjs@^5.0.1 but none is installed. You must install peer dependencies yourself.
  npm WARN @angular/http@4.4.7 requires a peer of rxjs@^5.0.1 but none is installed. You must install peer dependencies yourself.
  npm WARN @angular/router@4.4.7 requires a peer of rxjs@^5.0.1 but none is installed. You must install peer dependencies yourself.
  </code></pre>
  
  <p>I don't know why warnings concerns "4.4.7" versions if in my package.json I got "^5.2.0". I deleted \node_modules\@angular and package-lock.json then </p>
  
  <pre><code>npm install
  </code></pre>
  
  <p>Dependencies warnings still appears as well as error in browser console:</p>
  
  <pre><code>ERROR Error: Uncaught (in promise): TypeError: app.firestore is not a function
  TypeError: app.firestore is not a function
  </code></pre>
  
  <p>This also didn't help:</p>
  
  <pre><code>npm uninstall -g @angular/cli@1.7.3
  npm cache clear
  npm install -g @angular/cli@1.7.3
  </code></pre>
  
  <p>I got problems with both versions and now I'm not sure problems of which version I should trying to fix...</p>