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!
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>