[email protected] .snapshotChanges() not able to let you get the doc.payload.doc.data()

[mappedinn]

Version info

Angular: 6.0.4

Firebase: 5.0.3

AngularFire: 5.0.0-rc.10

[email protected] /home/amine/docker-projects/ng-test-angular6
├── @angular-devkit/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

How to reproduce these conditions

Have a look on the angular project ng-angular6-angularfire5.0.0-rc.10

Just clone, install and serve.

Debug output

The issue is coming from the function in that line L20

  fetchAvailableExercices() {
    this.db.collection('availablesExercices')
    .snapshotChanges()
    .pipe(map( docArray => {
      return docArray.map( doc => {
        console.log(doc);
        return(
           {
           id: doc.payload.doc.id,
           name: doc.payload.doc.data().name,
           duration: doc.payload.doc.data().duration,
           calories: doc.payload.doc.data().calories,
         }
        //doc
      );
      });
    }))
    .subscribe(exercices => {
      this.availableExercices = exercices;
      this.availableExercicesChanged.next([...this.availableExercices]);
    });
  }

The errors I am getting are:

Property 'name' does not exist on type '{}'.
Property 'duration' does not exist on type '{}'.
Property 'calories' does not exist on type '{}'.

In addition, I can not build a prod version of the angular application ng build --prod

But, if I take the document as it is (no setting to name, duration, calories), I am able the get the browser console the expected value is obtained:

> temp1.payload.doc.data()
{calories: 8, duration: 60, name: "Burpees"}

  fetchAvailableExercices() {
    this.db.collection('availablesExercices')
    .snapshotChanges()
    .pipe(map( docArray => {
      return docArray.map( doc => {
        console.log(doc);
        return(
        doc
      );
      });
    }))
    .subscribe(exercices => {
      this.availableExercices = exercices;
      this.availableExercicesChanged.next([...this.availableExercices]);
    });
  }

Expected behavior

• The following errors Property 'name' does not exist on type '{}'. has to desappear.
• Building a prod has to be successful

PS: AngularFire: 5.0.0-rc.8 does not throw the error message Property 'name' does not exist on type '{}'.. Nevertheless, it fails to build a prod version of the angular application.

ng build --prod

Date: 2018-06-10T20:10:08.203Z
Hash: 3395c915a85b5198ef71
Time: 4427ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.d651e93934b267387a12.css (styles) 56.5 kB [initial] [rendered]
chunk {2} polyfills.cdf87a8e5b31fe8a11f1.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.a2bc6cab25d0aa41c17a.js (main) 128 bytes [initial] [rendered]

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'AngularFireModule' was called.

[mappedinn]

Issue solved:

the correct way to get access to these properties (starting from [email protected]) is:

  fetchAvailableExercices() {
    this.db.collection('availablesExercices')
    .snapshotChanges()
    .pipe(map( docArray => {
      return docArray.map( doc => {
        console.log(doc);
        return(
          {
          id: doc.payload.doc.id,
          name: doc.payload.doc.data()['name'],
          duration: doc.payload.doc.data()['duration'],
          calories: doc.payload.doc.data()['calories'],
        }
        // doc
      );
      });
    }))
    .subscribe(exercices => {
      this.availableExercices = exercices;
      this.availableExercicesChanged.next([...this.availableExercices]);
    });
  }
}