角度生产错误：“对象”类型上不存在属性

Question

I have an Angular 7 app that is retrieving data from two separate endpoints:

1. http://localhost:1337/sms
2. http://localhost:1337/total

I can successfully make a GET request to these endpoints in development. However, I get the following error when I run ng build --prod :

ERROR in src/app/app.component.html(20,29): : Property 'total' does not exist on type 'object'.

As a test I temporarily removed {{ total.total }} from app.component.html, ran ng build --prod again and it worked.

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?

app.component.ts

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 => {
      this.signees = data;
      }
    );

    this.http.get('http://localhost:1337/total').subscribe(
      data => {
      this.total = data;
      }
    );

  }
}

Relevant app.component.html code

<section class="page-section mx-auto">
    <h3 class="text-center">{{ total.total }} people have signed the petition</h3>
    <div class="container">
      <div class="row">

      <div class="col-sm-6 col-lg-3"
      *ngFor="let signee of signees; index as i">
        <div class="card">
          <div class="card-body">
            <p class="h2">{{ signee.name }}</p>
            <ul class="signee-meta text-muted">
              <li>#{{ i + 1 }}</li>
              <li>{{ signee.date }}</li>
            </ul>
          </div>
        </div>
      </div>

    </div><!-- row -->
    </div><!-- container -->

  </section>

/total endpoint (MongoDB)

app.get('/total', (req, res) => {
    collection.countDocuments({}, function(err, num) {
      assert.equal(null, err);
      res.send({total: num});
    });
  });

EDIT (added data structure)

Data structure (MongoDB)

{ 
  "_id" : ObjectId("5c61e0b658261f10280b5b17"), 
  "name" : "Bill Kickok", 
  "number" : "+14950395584", 
  "date" : "2/11/19" 
}

Answer 1

This error is thrown when you run ng build --prod because behind the scenes this kind of build proccess works with Ahead Of Time compilation.

Here's what happens on AOT based on angular documentation .

Detect template errors earlier

The AOT compiler detects and reports template binding errors during the build step before users can see them.

You get that error because you try to render a property of total object while you have declared total as object .

In order to get rid of this error you should either create an interface for this variable. eg

export interface Total {
   total: number
   // any other properties total might include
}

Then use this interface for type definition in your component like this:

total: Total

In case you don't want to create an interface - which is a bad practice - you can define total as any ( total: any ).

Lastly, directly making the http requests in your component is also a bad practice . You should create a service, then add those methods which are responsible for communicating with your backend, then inject that service in your component and call that method.

I would advise you to take further look at angular documentation .

Answer 2

If possible, it would be a good idea to strongly type these properties, so instead of:

  signees: object;
  total: object;

If would be:

  signees: Signee[];
  total: Total;

Where Signee and Total would be interfaces:

export interface Signee {
  id: number;
  name: string;
  date: string;
  // ...
}

export interface Total{
  id: number;
  total: number;
  // ...
}

NOTE: The above would match the JSON structure returned in data (which is why someone asked what the structure of your data looked like).

And if total is just a single number you are receiving back, then it would just be:

total: number;

And you would just bind to total , not total.total .

You can then use this strong typing when you send the request to ensure that the response is appropriately shaped:

this.http.get<Signee[]>('http://localhost:1337/sms').subscribe(
  data => {
  this.signees = data;
  }
);

Notice the generic parameter specified in the code above.

Answer 3

you need start your object inside of constructor.

ex:

  constructor(private http: HttpClient){
    total = new Total();
}

Total is your class. This is recomendate in angular.io. Start your VAR inside constructor.