title: Angular production error: Property does not exist on type 'object'
body: <p>I have an Angular 7 app that is retrieving data from two separate endpoints:</p>
  
  <ol>
  <li><code>http://localhost:1337/sms</code></li>
  <li><code>http://localhost:1337/total</code></li>
  </ol>
  
  <p>I can successfully make a GET request to these endpoints in development. However, I get the following error when I run <code>ng build --prod</code>:</p>
  
  <p><code>ERROR in src/app/app.component.html(20,29): : Property 'total' does not exist on type 'object'.</code></p>
  
  <p>As a test I temporarily removed <code>{{ total.total }}</code> from app.component.html, ran <code>ng build --prod</code> again and it worked.</p>
  
  <p>Is this not the right way to make GET requests to two separate endpoints or am I doing something else incorrectly, perhaps in my Node server file?</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent implements OnInit {
    signees: object;
    total: object;
  
    constructor(private http: HttpClient){}
  
    ngOnInit(): void {
      this.http.get('http://localhost:1337/sms').subscribe(
        data =&gt; {
        this.signees = data;
        }
      );
  
      this.http.get('http://localhost:1337/total').subscribe(
        data =&gt; {
        this.total = data;
        }
      );
  
    }
  }
  </code></pre>
  
  <p>Relevant <strong>app.component.html</strong> code</p>
  
  <pre><code>&lt;section class="page-section mx-auto"&gt;
      &lt;h3 class="text-center"&gt;{{ total.total }} people have signed the petition&lt;/h3&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
  
        &lt;div class="col-sm-6 col-lg-3"
        *ngFor="let signee of signees; index as i"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-body"&gt;
              &lt;p class="h2"&gt;{{ signee.name }}&lt;/p&gt;
              &lt;ul class="signee-meta text-muted"&gt;
                &lt;li&gt;#{{ i + 1 }}&lt;/li&gt;
                &lt;li&gt;{{ signee.date }}&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- row --&gt;
      &lt;/div&gt;&lt;!-- container --&gt;
  
    &lt;/section&gt;
  </code></pre>
  
  <p><code>/total</code> <strong>endpoint (MongoDB)</strong></p>
  
  <pre><code>app.get('/total', (req, res) =&gt; {
      collection.countDocuments({}, function(err, num) {
        assert.equal(null, err);
        res.send({total: num});
      });
    });
  </code></pre>
  
  <p>EDIT (added data structure)</p>
  
  <p><strong>Data structure (MongoDB)</strong></p>
  
  <pre><code>{ 
    "_id" : ObjectId("5c61e0b658261f10280b5b17"), 
    "name" : "Bill Kickok", 
    "number" : "+14950395584", 
    "date" : "2/11/19" 
  }
  </code></pre>