Estoy teniendo un pequeño inconveniente al tratar de mandar mi proyecto a produccion con el comando ng build --prod
. Despues de ejecutar dicho comando el realiza una compilacion exhaustiva (AOT) a comparación de la ejecución del comando ng serve
que a su vez realiza una compilación pero no genera error o advertencia alguna en cuanto a la funcionalidad que he desarrollado (Pagina Maestro - Detalle), a continuación especifico con mas detalle:
Angular Cli / Detalle 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[]'.
Pagina Maestro
<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();
}
}
Entonces al hacer click en el botón "Detalle", debe de abrir una página nueva donde se cargan los datos en un formulario:
Pagina Detalle
<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 DetalleComponent
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() {
}
}
Por último tengo el servicio que he creado para cargar y obtener los datos del array
que he declarado con los datos necesarios para alimentar en las vistas:
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];
}
}
Le he estado dando vueltas al asunto, mirando y cambiando las declaraciones del array pero no he encontrado el error. Espero que me puedan echar una mano!