I'm having a small problem when trying to send my project to production with the ng build --prod command. After executing said command, it performs an exhaustive compilation (AOT) compared to the execution of the ng serve command that in turn compiles but does not generate any error or warning regarding the functionality that I have developed (Master Page - Detail ), below I specify in more detail:
Angular Cli / Detail Error
C:\Users\Johan Corrales\Documents\GitHub\inventory>ng build --prod
Date: 2018-07-17T16:13:13.004Z
Hash: 7c51a01b7d98bff3951d
Time: 18195ms
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[]'.
Master Page
<div class="card" *ngFor="let bodega of listadoBodegas, index as id">
<div class="card-header">
<h4 class="my-0 font-weight-normal">
{{bodega.nombre_bodega}}
</h4>
</div>
<div class="card-body">
<h2 class="card-title pricing-card-title">N° {{bodega.numero_bodega}}</h2>
<ul class="list-unstyled mt-3 mb-4 text-left">
<li>
<strong>Ciudad: </strong> {{bodega.ciudad_bodega}}.
</li>
<li>
<strong>Dirección:</strong> {{bodega.direccion_bodega}}.
</li>
<li>
<strong>Código: </strong> #{{bodega.codigo_bodega}}.
</li>
<li>
<strong>Creación: </strong> 2 días atrás ({{bodega.fecha_bodega}}).
</li>
</ul>
</div>
<div class="card-footer text-muted">
<div class="form-row">
<div class="col-xs-6 col-md-6 col-lg-6">
<button type="button" class="btn btn-sm btn-block btn-outline-primary" [routerLink]="['/detalle-bodega', id]">Detalles</button>
</div>
<div class="col-xs-6 col-md-6 col-lg-6">
<button type="button" class="btn btn-sm btn-block btn-outline-danger" data-toggle="modal" data-target="#modalEliminar">Eliminar</button>
</div>
</div>
</div>
</div>
Typescript BodegaComponent
import { Component, OnInit } from '@angular/core';
//Importacion de servicios
import { BodegaService } from './../services/bodega.service';
@Component({
selector: 'app-bodega',
templateUrl: './bodega.component.html',
styleUrls: ['./bodega.component.css']
})
export class BodegaComponent implements OnInit {
//Declaracion de array
listadoBodegas:any[] = [];
constructor(private _service:BodegaService)
{
this.listadoBodegas = _service.consultarBodega();
}
}
Then when you click on the "Detail" button, you must open a new page where the data is loaded in a form:
Detail Page
<form>
<div class="form-row">
<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>
<hr>
<button type="submit" class="btn btn-block btn-success">Actualizar</button>
</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>
<hr>
<button type="submit" class="btn btn-block btn-danger">Eliminar</button>
</div>
</div>
</form>
Typescript DetailComponent
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: Array<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() {
}
}
Finally I have the service that I created to load and obtain the data of array that I have declared with the necessary data to feed in the views:
BodegaService
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class BodegaService {
//Declaracion de array
listadoBodegas:any[] = [
{
nombre_bodega:'Mac Pollo',
numero_bodega:'200',
ciudad_bodega:'Per, CA',
direccion_bodega: 'Via el pollo',
codigo_bodega:'1000',
fecha_bodega:'03/05/2018'
},
{
nombre_bodega:'Corosito',
numero_bodega:'201',
ciudad_bodega:'Per, Ri',
direccion_bodega: 'Via el pollo',
codigo_bodega:'1001',
fecha_bodega:'03/05/2018'
},
{
nombre_bodega:'INCAUCA',
numero_bodega:'202',
ciudad_bodega:'Ca, Va',
direccion_bodega: 'Centro logístico',
codigo_bodega:'1002',
fecha_bodega:'03/05/2018'
},
{
nombre_bodega:'El Bombillo',
numero_bodega:'203',
ciudad_bodega:'La, R',
direccion_bodega: 'Zona Franca',
codigo_bodega:'1003',
fecha_bodega:'03/05/2018'
},
{
nombre_bodega:'El Arriero',
numero_bodega:'204',
ciudad_bodega:'Ga, Fe',
direccion_bodega: 'Cerritos',
codigo_bodega:'1004',
fecha_bodega:'03/05/2018'
}
]
constructor() { }
consultarBodega()
{
return this.listadoBodegas;
}
obtenerIndexBodega(id)
{
return this.listadoBodegas[id];
}
}
I've been running around with the issue, looking and changing the array statements but I have not found the error. I hope you can help me out!