ng build prod doesn't return a model field

Question

I find that my project work fine in my local machine with the ng serve but when I use the ng build prod it doesn't return a model field

I use the below model that is populated by the api node.js

export class Tenders {
    public licitacion: string
    public fecha: string
    public finaliza: string
    public producto: number
    public descrip: string
    public cantidad: number
    public unidad: string
    public costo: number
    public ultcompra: string
    public proveedor: number
    public provenom: string
    public estado: number
}

I use the below code for populate the table.

  async pedirTenders(user) {
    if (user) {
      // console.log('Tenders')
      this.tenderService.getTenders()
      .subscribe((resp: Tenders[]) => {
        console.log(resp.Tenders)
        this.dataSource.data = resp.Tenders
        this.dataSource.sort = this.sort
        this.dataSource.paginator = this.paginator
        this.table.dataSource = this.dataSource
      })
    }
  }

And the service for the GetHTTP

 getActives(): Observable<Tenders[]> {
    return this.http.get<Tenders[]>(this.url.baseApiUrl + 'tendersactives', this.getHttpOptions())
  }

When I run the ng serve in my local machine it's return the licitacion field as it's declare in the model and as it can be see in the console screenshot below

with ng serve

But when I run the ng --prod the licitacion field doesn't appear as the screenshot below

with ng --prod

The api used for both requests is the same

The package.json use is

{
  "name": "comprasmat",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -o",
    "build": "ng --build --base-href /",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.1.3",
    "@angular/cdk": "^10.2.0",
    "@angular/common": "^10.1.3",
    "@angular/compiler": "^10.1.3",
    "@angular/core": "^10.1.3",
    "@angular/flex-layout": "^10.0.0-beta.32",
    "@angular/forms": "^10.1.3",
    "@angular/localize": "^10.1.3",
    "@angular/material": "^10.2.0",
    "@angular/platform-browser": "^10.1.3",
    "@angular/platform-browser-dynamic": "^10.1.3",
    "@angular/router": "^10.1.3",
    "@mdi/angular-material": "^5.6.55",
    "@mdi/font": "^5.6.55",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "bootstrap": "^4.5.2",
    "jquery": "^3.5.1",
    "moment": "^2.27.0",
    "popper.js": "^1.16.1",
    "rxjs": "^6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.3",
    "@angular/cli": "^10.1.3",
    "@angular/compiler-cli": "^10.1.3",
    "@angular/language-service": "^10.0.11",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "^3.9.7"
  },
  "optionalDependencies": {
    "fsevents": "^2.1.3"
  }
}

Thanks in advance for any suggestion

Kind regards

Answer 1

Thank you all for taking the time to answer me. However after adding the await to the async request doesn't resolve the problem. I've changed the get function but the "licitacion" field and all the offer related fileds are still missing

async pedirTenders(user) {
    if (user) {
      let resp: any = await this.tenderService.getTenders().toPromise()
      
      console.log(resp.Tenders)
      this.dataSource.data = resp.Tenders
      this.dataSource.sort = this.sort
      this.dataSource.paginator = this.paginator
      this.table.dataSource = this.dataSource
    }

Here is the Html code requested. I'm trying to make a mat-table with a collapsed row that shows the offers subquery. the wire thing it's everything working perfect on my local machine but not in prod environment.

Thanks again

    <div class="mat-elevation-z8 table-responsive">
      <table mat-table [dataSource]='dataSource' matSort aria-label="Elements" multiTemplateDataRows class="mat-elevation-z8">
          <ng-container matColumnDef="licitacion">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{esp ? 'Req.' : 'Order'}}</th>
            <td mat-cell *matCellDef="let element">{{element.licitacion}}</td>
          </ng-container>
  
          <ng-container matColumnDef="descrip">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{esp ? 'Producto' : 'Product'}}</th>
            <td mat-cell *matCellDef="let element">{{element.descrip}}</td>
          </ng-container>
  
          <ng-container matColumnDef="cantidad">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{esp ? 'Cantidad' : 'Quantity'}}</th>
            <td mat-cell *matCellDef="let element">{{element.cantidad}} {{element.unidad}}</td>
          </ng-container>
  
          <ng-container matColumnDef="fecha">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{esp ? 'Inicio' : 'Start'}}</th>
            <td mat-cell *matCellDef="let element">{{element.fecha.substring(0,10)}}</td>
          </ng-container>
  
          <ng-container matColumnDef="finaliza">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>{{esp ? 'Fin' : 'End'}}</th>
              <td mat-cell *matCellDef="let element">{{element.finaliza.substring(0,10)}}</td>
          </ng-container>
  
          <ng-container matColumnDef="estado">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>{{esp ? 'Estado' : 'State'}}</th>
              <td mat-cell *matCellDef="let element">{{esp ? estadosLicitaciones[element.estado].estadoesp : estadosLicitaciones[element.estado].estadoeng}}</td>
          </ng-container>
  
          <ng-container matColumnDef="acciones">
            <th mat-header-cell *matHeaderCellDef>{{esp ? 'Ofertas' : 'Offers'}}</th>
            <td mat-cell *matCellDef="let element">
              <!-- <button mat-icon-button color="primary" data-toggle="tooltip" title="{{esp ? 'Detalle' : 'Details'}}" (click)="element.isExpanded = !element.isExpanded"> -->
                <!-- <mat-icon>description</mat-icon> -->
                <!-- <span class="badge badge-primary badge-pill">{{element.offer.length ? element.offer.length : 0}}</span> -->
              <!-- </button> -->
            </td>
          </ng-container>
      
          <ng-container matColumnDef="expandedDetail">
            <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
              <div class="example-element-detail" [@detailExpand]="element.isExpanded ? 'expanded' : 'collapsed'">
 
                <div class="container pl-0 ml-0 m-0 pb-0 pr-2 overflow-auto">
                  <table class="table" >
                    <thead class="thead-light">
                      <tr>
                        <th>{{esp ? 'Scoring' : 'Scoring'}}</th>
                        <th>{{esp ? 'Oferta' : 'Offer'}}</th>
                        <th>{{esp ? 'Usuario' : 'User'}}</th>
                        <th>{{esp ? 'Cantidad' : 'Quantity'}}</th>
                        <th>{{esp ? 'Precio' : 'Price'}}</th>
                        <th>{{esp ? 'Entrega' : 'Delivery'}}</th>
                      </tr>
                    </thead>
                    <tbody *ngFor="let offer of element?.offer;index as i">
                      <tr>
                        <td>{{i+1}}</td>
                        <td>{{offer.oferta}}</td> 
                        <td>{{offer.usuario}}</td>
                        <td>{{offer.cantidad}} {{offer.unidad}}</td>
                        <td>{{offer.precio}}</td>
                        <td class="d-flex flex-nowrap">{{offer.entrega.substring(0,10)}}</td>
                        </tr>
                    </tbody>
                  </table>
                </div>
                                    
                <div class="descrip example-element-description">
                  <div>
                    <h5 class="mt-2">{{esp ? 'Detalle' : 'Details'}} {{element.descrip}}</h5>
                    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam vel dolor laboriosam, maiores eveniet repellat at quibusdam distinctio repellendus illo quidem rerum. Aperiam aspernatur quae amet adipisci inventore maxime assumenda?</div>
                  </div>
                  
                  <ng-container *ngIf="cuenta">
                    <ng-container *ngIf="canOffer">
                      <div class="ml-auto mb-2">
                        <button mat-raised-button color="primary" (click)="makeAnOffer()">
                          <mat-icon>note_add</mat-icon>&nbsp; {{esp ? 'Nueva Oferta' : 'New Offer'}}
                        </button>
                      </div>
                    </ng-container>
                  </ng-container>

                </div>

              </div>
            </td>
          </ng-container>
  
          <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
          <tr mat-row *matRowDef="let element; columns: displayedColumns;"
              class="example-element-row"
              [class.example-expanded-row]="element.isExpanded"
              (click)="element.isExpanded = !element.isExpanded">
          </tr>
          <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

        </table>
    </div>