执行命令 ng build --prod (Angular) 时出错

Question

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

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

类型/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() {
  }

}

类型/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];
  }
}

我不得不说运行什么时候 angular cli 中的命令 ng serve 都是运行的正确方法。那么，我做错了什么？ angular cli 显示该错误。谢谢！

Answer 1

所以，你有 listadoBodegas，任何东西的数组。

listadoBodegas : any[]

然后你写：

listadoBodegas.nombre_bodega

这是不可能的。您有一个 List [] OR 和 object 具有 nombre_bodega 属性，但不是两者都有。

所以也许您没有数组并从您的类型中删除 []。或者如果它是一个数组，你需要在里面获取不同的元素。

Answer 2

此代码：

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

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

所以这个：

listadoBodegas:any[] = [];

需要这样：

listadoBodegas = {};

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

Answer 3

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

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

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

Answer 4

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>

执行命令 ng build --prod (Angular) 时出错

Error when execute the command ng build --prod (Angular)

production

typescript

angular-cli

angular

angular6