Question

在Angular中执行命令ng build --prod时出现错误。我已经完成了我的小项目，我需要生成文件以上传到我的托管服务提供商。

错误-角度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[]'.

许多变量或属性都是西班牙语。

查看/ 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];
  }
}

我不得不说，当在角度cli中使用命令ng serve运行时，所有命令都以正确的方式运行。所以，我做错了什么？角度cli显示该错误。谢谢！

Answer 1

此代码：

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

从数组而不是数组中返回一个元素（对象）。

所以这个：

listadoBodegas:any[] = [];

需要这样：

listadoBodegas = {};

此外，我建议为您的listadoBodegas定义一个接口，这样您就无需使用“ any”数据类型。

Answer 2

ng build --prod与ng build或ng serve相比，提供的捆绑包尺寸更小。因此，因此必须严格检查所有类型定义。

您只需要消除所有错误，即可完成构建。

从输出的错误中我们可以看到。你有问题

listadoBodegas: any[] = [];

随随便便吧

listadoBodegas: any = [];

或

listadoBodegas: Array<any> = [];

我们可以看到您有一个对象数组，因此您需要像这样遍历数组：

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

或者也许只是输出数组的第一个索引：

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

Answer 3

所以，您有listadoBodegas，它是任何东西的数组。

listadoBodegas : any[]

然后您写：

listadoBodegas.nombre_bodega

这不可能。您有一个具有属性nombre_bodega的列表[] OR和对象，但不是两个都具有。

因此，也许您没有数组，并从类型中删除了 [] 。或者，如果是数组，则需要在内部获取不同的元素。

Answer 4

在为您的应用程序提供服务时，可能不会显示一些不会破坏应用程序的错误。您将输入的值绑定到一个空数组。您可以这样做以避免出现此问题

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

在绑定中的值之后添加?将检查该值是否存在。

执行命令ng build --prod（Angular）时出错

4 个答案: