2

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!

1 respuesta 1

1

Te recomendaria no hacer dumps del codigo completo, pues mucho de ello no tiene utilidad y parte de solucionar un problema es reducir la cantidad de codigo a analizar (en tu caso el error te da la linea exacta en donde se encuentra el error).

En Pagina Detalle haces esto

<input type="text" class="form-control border-primary" placeholder="Fecha de registro" [value]="listadoBodegas.fecha_bodega" disabled>

El error esta que estas usando un array como si este fuera un objeto, listadoBodegas[] no tiene el atributo fecha_bodega pues este no es un objeto, deberias crear un objeto o si quieres modificar un objeto dentro del array con el index que recibes por parametro deberias escribir:

[value]="listadoBodegas[indiceDeLaBodega].fecha_bodega"

O crear un objeto bodega: {fecha_bodega: '', otrosAtributos: ''}' y asignarle el valor de listadoBodegas[indiceDeLaBodega] en el ciclo onInit()

[value]="bodega.fecha_bodega"
5
  • Respecto al codigo tienes razón, pero quería dar un amplio concepto de lo que estoy realizando. Y con listadoBodegas nunca es indefinido, se inicializa en una matriz vacía dentro del componente y luego se reemplaza con el objeto correcto cuando el servicio regresa de obtenerIndexBodega. Además de que me funciona sin ningún problema, solo surge cuando voy a enviarlo a produccion
    – jecorrales
    Commented el 17 jul. 2018 a las 17:10
  • Inclusive si realizo un console.log sobre la variable this.listadoBodegas obtengo los datos con el servicio this.listadoBodegas = this._service.obtenerIndexBodega(params['id']); y recupero los datos de la forma esperada.
    – jecorrales
    Commented el 17 jul. 2018 a las 17:15
  • 1
    Property 'fecha_bodega' does not exist on type 'any[]', tu error te indica el problema claramente, si this._service.obtenerIndexBodega(params['id']); retorna un objeto entonces estas declarando listadoBodegas como array sin ningun sentido, estas declarando un array y retornado un objeto por lo que en el html tratas al array como un objeto, al hacer el build --prod angular es mas estricto que en modo dev, intenta declararlo como un objeto (lo ideal seria que crees el modelo) e intenta hacer el build. Commented el 17 jul. 2018 a las 17:43
  • 1
    si estas usando listadoBodegas como un array dentro del mismo componente te tocara declarar otra variable como bodegaSeleccionada que sea un objeto y de preferencia hacer un modelo de bodega ya que veo que utilizas mucho este modelo. Commented el 17 jul. 2018 a las 17:48
  • Gracias, ha sido de gran ayuda, sobre todo tu anterior comentario, me hizo evaluar bien que es lo que estaba realizando mal. Por no decir que me lo explicaste con plastilina.
    – jecorrales
    Commented el 17 jul. 2018 a las 20:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.