Error when execute the command ng build --prod (Angular)

Question

I'm getting an error, when I'm executing the command ng build --prod in Angular. I've finished my little project and I need to generate the files to upload to my hosting provider.

ERROR - ANGULAR CLI

C:\Users\Johan Corrales\Documents\GitHub\inventory>ng build --prod

Date: 2018-07-16T19:15:30.635Z
Hash: 7c51a01b7d98bff3951d
Time: 16720ms
chunk {scripts} scripts.e0a8f821933ac7e59b03.js (scripts) 154 kB  [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.fa70ecd2f42fd8700239.css (styles) 141 kB [initial] [rendered]
chunk {2} polyfills.207dcc605630215505f5.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.f58b96bf9bf614ca37d4.js (main) 128 bytes [initial] [rendered]

ERROR in src\app\detalle-bodega\detalle-bodega.component.html(35,112): : Property 'nombre_bodega' does not exist on type 'any[]'.
src\app\detalle-bodega\detalle-bodega.component.html(39,110): : Property 'fecha_bodega' does not exist on type 'any[]'.
src\app\detalle-bodega\detalle-bodega.component.html(43,112): : Property 'ciudad_bodega' does not exist on type 'any[]'.
src\app\detalle-bodega\detalle-bodega.component.html(51,115): : Property 'direccion_bodega' does not exist on type 'any[]'.
src\app\detalle-bodega\detalle-bodega.component.html(55,112): : Property 'numero_bodega' does not exist on type 'any[]'.
src\app\detalle-bodega\detalle-bodega.component.html(59,112): : Property 'codigo_bodega' does not exist on type 'any[]'.

Some many variables or properties are in spanish language.

VIEW / HTML

<div class="col-md-6">
    <div class="form-group text-left">
       <label class="">Bodega</label>
       <input type="text" class="form-control border-primary" placeholder="Nombre de la bodega" [value]="listadoBodegas.nombre_bodega">
    </div>
    <div class="form-group text-left">
       <label class="">Fecha de Registro</label>
       <input type="text" class="form-control border-primary" placeholder="Fecha de registro" [value]="listadoBodegas.fecha_bodega" disabled>
    </div>
    <div class="form-group text-left">
        <label class="">Ciudad</label>
        <input type="text" class="form-control border-primary" placeholder="Ciudad de la bodega" [value]="listadoBodegas.ciudad_bodega">
    </div>
 </div>
 <div class="col-md-6">
    <div class="form-group text-left">
       <label class="">Dirección</label>
       <input type="text" class="form-control border-primary" placeholder="Dirección de la bodega" [value]="listadoBodegas.direccion_bodega">
    </div>
    <div class="form-group text-left">
       <label class="">Número</label>
       <input type="text" class="form-control border-primary" placeholder="Número de la bodega" [value]="listadoBodegas.numero_bodega">
    </div>
    <div class="form-group text-left">
        <label class="">Código</label>
        <input type="text" class="form-control border-primary" placeholder="Código de la bodega" [value]="listadoBodegas.codigo_bodega">
    </div>
</div>

TYPESCRIPT / COMPONENT.TS

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
//Importacion de servicios
import { BodegaService } from './../services/bodega.service';

@Component({
  selector: 'app-detalle-bodega',
  templateUrl: './detalle-bodega.component.html',
  styleUrls: ['./detalle-bodega.component.css']
})
export class DetalleBodegaComponent implements OnInit {

  //Declaracion del array para el listado de las bodegas
  listadoBodegas:any[] = [];
  //Declaracion de modelos
  nombre_bodega:any;
  fecha_bodega:any;
  ciudad_bodega:any;
  direccion_bodega:any;
  numero_bodega:any;
  codigo_bodega:any;

  constructor(
    private ruta:ActivatedRoute,
    private _service:BodegaService
  ){
    this.ruta.params.subscribe(params=>{
      //console.log("params: " , params['id']);
      this.listadoBodegas = this._service.obtenerIndexBodega(params['id']);
      //console.log("listado: ", this.listadoBodegas)
    });
  }

  ngOnInit() {
  }

}

TYPESCRIPT / SERVICE.TS

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class BodegaService {

  //Declaracion de modelos
  nombre_bodega:any;
  fecha_bodega:any;
  ciudad_bodega:any;
  direccion_bodega:any;
  numero_bodega:any;
  codigo_bodega:any;

  //Declaracion de array
  listadoBodegas:any[] = [
    {
      nombre_bodega:'Mac Pollo',
      numero_bodega:'200',
      ciudad_bodega:'Pereira, Risaralda',
      direccion_bodega: 'Via el pollo',
      codigo_bodega:'1000',
      fecha_bodega:'03/05/2018'
    },
    {
      nombre_bodega:'Corosito',
      numero_bodega:'201',
      ciudad_bodega:'Pereira, Risaralda',
      direccion_bodega: 'Via el pollo',
      codigo_bodega:'1001',
      fecha_bodega:'03/05/2018'
    },
    {
      nombre_bodega:'INCAUCA',
      numero_bodega:'202',
      ciudad_bodega:'Cali, Valle del Cauca',
      direccion_bodega: 'Centro logístico',
      codigo_bodega:'1002',
      fecha_bodega:'03/05/2018'
    },
    {
      nombre_bodega:'El Bombillo',
      numero_bodega:'203',
      ciudad_bodega:'La Virginia, Risaralda',
      direccion_bodega: 'Zona Franca',
      codigo_bodega:'1003',
      fecha_bodega:'03/05/2018'
    },
    {
      nombre_bodega:'El Arriero',
      numero_bodega:'204',
      ciudad_bodega:'Pereira, Risaralda',
      direccion_bodega: 'Cerritos',
      codigo_bodega:'1004',
      fecha_bodega:'03/05/2018'
    }
  ]

  constructor() { }

  consultarBodega()
  {
    return this.listadoBodegas;
  }

  obtenerIndexBodega(id)
  {
    return this.listadoBodegas[id];
  }
}

I have to say that when is running with the command ng serve in angular cli, all is running in a correct way. So, what I'm doing wrong? angular cli shows that error. Thanks!

Gregor Ojstersek · Accepted Answer · 2018-07-16 20:01:37Z

ng build --prod is making a smaller bundle size than just ng build or ng serve. So because of that all the type definitions are strictly checked.

You just need to get rid of all the errors and the build will go through.

As we can see from the error that is outputed. You have a problem with

listadoBodegas: any[] = [];

just make it any:

listadoBodegas: any = [];

or

listadoBodegas: Array<any> = [];

And as we can see you have an array of objects, so you would need to iterate thorugh the array like this:

<div *ngFor="let item of listadoBodegas">

    <div class="col-md-6">
        <div class="form-group text-left">
            <label class="">Bodega</label>
            <input type="text" class="form-control border-primary" placeholder="Nombre de la bodega" [value]="item.nombre_bodega">
        </div>
        <div class="form-group text-left">
            <label class="">Fecha de Registro</label>
            <input type="text" class="form-control border-primary" placeholder="Fecha de registro" [value]="item.fecha_bodega" disabled>
        </div>
        <div class="form-group text-left">
            <label class="">Ciudad</label>
            <input type="text" class="form-control border-primary" placeholder="Ciudad de la bodega" [value]="item.ciudad_bodega">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group text-left">
            <label class="">Dirección</label>
            <input type="text" class="form-control border-primary" placeholder="Dirección de la bodega" [value]="item.direccion_bodega">
        </div>
        <div class="form-group text-left">
            <label class="">Número</label>
            <input type="text" class="form-control border-primary" placeholder="Número de la bodega" [value]="item.numero_bodega">
        </div>
        <div class="form-group text-left">
            <label class="">Código</label>
            <input type="text" class="form-control border-primary" placeholder="Código de la bodega" [value]="item.codigo_bodega">
        </div>
    </div>

</div>

or maybe just ouput the first index of an array:

<div class="col-md-6">
    <div class="form-group text-left">
        <label class="">Bodega</label>
        <input type="text" class="form-control border-primary" placeholder="Nombre de la bodega" [value]="listadoBodegas[0].nombre_bodega">
    </div>
    <div class="form-group text-left">
        <label class="">Fecha de Registro</label>
        <input type="text" class="form-control border-primary" placeholder="Fecha de registro" [value]="istadoBodegas[0].fecha_bodega" disabled>
    </div>
    <div class="form-group text-left">
        <label class="">Ciudad</label>
        <input type="text" class="form-control border-primary" placeholder="Ciudad de la bodega" [value]="istadoBodegas[0].ciudad_bodega">
    </div>
</div>
<div class="col-md-6">
    <div class="form-group text-left">
        <label class="">Dirección</label>
        <input type="text" class="form-control border-primary" placeholder="Dirección de la bodega" [value]="istadoBodegas[0].direccion_bodega">
    </div>
    <div class="form-group text-left">
        <label class="">Número</label>
        <input type="text" class="form-control border-primary" placeholder="Número de la bodega" [value]="istadoBodegas[0].numero_bodega">
    </div>
    <div class="form-group text-left">
        <label class="">Código</label>
        <input type="text" class="form-control border-primary" placeholder="Código de la bodega" [value]="istadoBodegas[0].codigo_bodega">
    </div>
</div>

Understood, but, I've forgotten say that this piece of my code is an page as "Master - Detail" so, I have a bodegas (warehouse) list, and one option that you can watch all the details of that warehouse, so I need to show the detail of everyone in an input with type text.. For that way I'm not using a loop (ngFor).

DeborahK · Accepted Answer · 2018-07-16 19:52:11Z

1

This code:

  obtenerIndexBodega(id)
  {
    return this.listadoBodegas[id];
  }

Is returning one element (object) from the array, not an array.

So this:

listadoBodegas:any[] = [];

Needs to be this:

listadoBodegas = {};

Also, I would recommend defining an interface for your listadoBodegas so you don't need to use the 'any' data type.

answered Jul 16, 2018 at 19:52

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

2 Comments

jecorrales Over a year ago

Hi @DeborahK I've forgotten say that this type of page has an other page as "Master - Detail". For that I'm using that part of the code. So, the warehouse list as first page, if I touch the button "details" it takes me a new interface for show every details from the warehouse selected.

DeborahK Over a year ago

Then your "master" page is missing the *ngFor to loop through the items to display in the list. I have a complete example of a master/detail page here: github.com/DeborahK/Angular-GettingStarted/tree/master/… Check out the products folder for the product list and product detail pages. Hopefully those will help.

Wandrille · Accepted Answer · 2018-07-16 19:49:31Z

0

So, you have listadoBodegas, an array of anything.

listadoBodegas : any[]

and you write:

listadoBodegas.nombre_bodega

This is not possible. You have a List [] OR and object with the attribute nombre_bodega but not both of them.

So maybe, you dont have an array and remove the [] from your type. Or if it's an array, you need to get the different elements inside.

answered Jul 16, 2018 at 19:49

Wandrille

6,9274 gold badges27 silver badges46 bronze badges

2 Comments

jecorrales Over a year ago

so, whats the correct way to show data in a type page "master - detail", Because the page bodegas has the list of bodegas and you touch the button Details and the next component is the detail of that bodega (warehouse)

Wandrille Over a year ago

@DeborahK and other members have given also good answer. You can check them

kaosdev · Accepted Answer · 2018-07-16 20:00:05Z

-1

When you serve your application some errors that doesn't break the application might not be shown. You are binding value of you inputs to an empty array. You can do this to avoid this problem

<input type="text" [value]="listadoBodegas.nombre_bodega?">

Adding ? after a value in a binding will check if the value exist or not.

answered Jul 16, 2018 at 20:00

kaosdev

3091 silver badge7 bronze badges

7 Comments

user184994 Over a year ago

Firstly, it would be listadoBodegas?.nombre_bodega, and secondly, that isn't the issue here. That would cause a runtime error, and OP is asking about a compile time error.

kaosdev Over a year ago

The error here is that listaBodegas is an empty array, so accessing listaBodegas.nombre_bodega would cause an error because nombre_bodega doesn't exist in listadoBodega.

user184994 Over a year ago

Nope, the error is a compile time error. The compiler has no idea that the array is empty. The real problem is because an array does not have a nombre_bodega property. Also, as @DeborahK has pointed out, obtenerIndexBodega doesn't even return an array, so shouldn't be typed as such

kaosdev Over a year ago

And why it run with Ng serve?

user184994 Over a year ago

Because ng build --prod (unlike ng serve) performs AOT compilation, so it will try to spot any errors in the template as well

|

Collectives™ on Stack Overflow

Error when execute the command ng build --prod (Angular)

4 Answers 4

1 Comment

2 Comments

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related