ERROR TypeError: Converting circular structure to JSON --> starting at object with constructor 'FirebaseAppImpl' Firebase Angular

Question

When trying to get the data from an observable I am getting this error from the console.

My code is as follows

Anglar Service - service.ts

     import { Injectable } from '@angular/core';
        import { AngularFirestore } from '@angular/fire/firestore';
        @Injectable({
          providedIn: 'root'
        })
        export class ViewReportService {
          constructor(private firestore: AngularFirestore) { }
          getReport = (myDocument) => 
            this.firestore.collection("report").doc(myDocument).get()
        }

component ts.

  import { Component, OnInit } from '@angular/core';
    import { ViewReportService } from '../shared/view-report.service';
    import { Observable } from 'rxjs';
    @Component({
      selector: 'app-view-report',
      templateUrl: './view-report.component.html',
      styleUrls: ['./view-report.component.scss']
    })
    export class ViewReportComponent implements OnInit {
      document= [];
      document$ : Observable<any>;
      constructor(private service: ViewReportService) { }
      ngOnInit(){
        let documentID = "----"
        //Get the Data from the view-report service
        this.document$ = this.service.getReport(documentID);
      }
    }

on my HTML View

 <table *ngIf="document$ | async as document">
        <pre>{{document.name}}</pre> 

Answer 1

It sounds like you have an circular object structure, which then can't be stored in the database. Remember: Firestore documents can only contain JSON data, and not all JavaScript objects are valid JSON. For example: JavaScript objects may contain function definitions, which are not valid in JSON.

The simplest way to convert a JavaScript object to JSON, is JSON.parse(JSON.stringify(object)). You'll need to do this in the place where you write the object to the database.