Encountering an issue while running the ng build --prod command in Angular

I ran into an issue while trying to execute the command ng build --prod in Angular. I've completed my small project and now need to generate the necessary files for uploading to my hosting provider.

ERROR - 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[]'.

There seems to be an issue with many variables or properties being in Spanish.

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>

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];
      }
    }

I would like to mention that when running with the command ng serve in angular cli, everything works fine. So, I'm a bit confused as to why this error is showing up. Any help would be much appreciated. Thanks!

angulartypescriptangular-cliangular6production

Answer №1

When using ng build --prod, the resulting bundle size is smaller compared to just using ng build or ng serve. This leads to stricter type checking of all the type definitions.

To successfully complete the build process, you simply need to resolve all the errors that are encountered.

An error related to:

listadoBodegas: any[] = [];

can be fixed by changing it to:

listadoBodegas: any = [];

or 

listadoBodegas: Array<any> = [];

Additionally, since this array contains objects, you must iterate through it as follows:

<div *ngFor="let item of listadoBodegas">
...

Alternatively, if you only want to display the first index of the array, you can do so like this:

<div class="col-md-6">
   ...
</div>

Answer №2

In the following code snippet:

  getWarehouseIndex(id)
  {
    return this.warehouseList[id];
  }

The function is retrieving a single element (object) from an array, not the entire array.

Therefore, instead of declaring an array like this:

warehouseList: any[] = [];

You should declare it as an object like this:

warehouseList = {};

Furthermore, it is advisable to create an interface for your warehouseList so that you can avoid using the 'any' data type.

Answer №3

Let's say you have a collection called "listadoBodegas" which can contain various data types.

listadoBodegas : any[]

Now, if you try to access a property like listadoBodegas.nombre_bodega, it will not work as expected because the variable could be either an array or an object with the attribute "nombre_bodega", but not both simultaneously.

To correct this, you may need to remove the brackets from your type definition if it is not actually an array, or if it is an array, make sure to iterate through each element to access their properties individually.

Answer №4

When running your application, sometimes errors that do not break the application may not be displayed. If you bind the value of your inputs to an empty array, this issue can arise.


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

By adding a ? after a value in a binding, you can check whether the value exists or not.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for combining values with Reactive Forms

Is there a way to merge two values into a single label using Reactive Forms without utilizing ngModel binding? <label id="identificationCode" name="identificationCode" formControlName="lb ...

javascripthtmlangulartypescript

Is it possible for two-way binding to function in index.html within Angular 4?

Does two-way binding function in index.html? I have some links and metadata in index.html. How can we define head parameters in a component? <head> <meta name="og:title" content={{titleValue}}> <meta name="og:url" content={{urlValue}}> & ...

javascriptangularmeta-tags

Typescript inheritance results in an undefined value being returned

I am trying to understand the code below, as I am confused about its functionality. In languages like C# or Java, using the base or super keyword usually returns values, whereas in TypeScript, I am receiving "undefined". However, when I switch from using " ...

javascripttypescriptes6-class

Challenge with using the React useEffect hook

Incorporating the React useEffect hook into my code has been a bit challenging. Here is how I am attempting to use it: function App() { React.useEffect(() => { console.log('effect working') }, []) return ( <div className=" ...

reactjstypescriptreact-hooksuse-effect

Can social login be used to add Firebase users to the user database?

When a user logs in through a social provider like Facebook, does Firebase automatically include them in the Firebase Authentication/User database? In simpler terms, if Christine signs in with Facebook, will Firebase save her Email address, first name, et ...

angularfirebasefirebase-realtime-databasefirebase-authentication

When attempting to run the yarn build dist command, an error of type TypeError is encountered, stating that it is not possible to set the constructor property

Upon executing the following command in a GitHub workflow, I encountered this error: npm-run-all -p types transpile @internal_package: $ swc src --out-dir dist @internal_package: /home/runner/work/repo-name/repo-name/node_modules/ttypescript/lib/loadTypesc ...

node.jstypescriptgithubnpm

What is the command to activate watch mode using ngc?

In the past, using the old tsc method, I could simply call tsc -w and any changed files would be recompiled on the fly. However, with ngc, it seems that the -w flag doesn't have any effect and there is a lack of documentation on its command line argu ...

angularangular-compilerangular-aot

Facing issues with Angular2 integration with Semantic UI

I am currently working with Angular2 and Nodejs. Within my application, I have a list of employees that includes their names, addresses, ranks, and other details. My goal is to display additional information when a user hovers over an employee's name. ...

node.jsangularsemantic-ui

Cricket score update features on the client side

Looking for assistance with client-side code development! I am currently working on an Android application using Ionic that involves live cricket scores. I have purchased a cricket API and understand how to connect to it using Node.js on the server side. ...

javascriptandroidnode.jsangularionic4

What is the best way to assign a variable with the type (x:number)=>{y:number,z:number}?

I am trying to initialize a variable called foo, but my current code is not compiling successfully. let foo: (x: number) => {y:number,z: number} = (x) => {x+1, x+2}; This results in the following error: Left side of comma operator is unused and ha ...

javascripttypescript

The Angular route successfully navigated to the page, but the HTML content was not

Whenever I select the Home option in the navigation bar, it takes me to the home URL but doesn't display the HTML content. Below is my app.routing.module.ts code: import { Component, NgModule } from '@angular/core'; import { RouterModule, Ro ...

angulartypescriptroutesangular-ui-router

Exploring the functionalities of arrays in Typescript: A beginner's guide

Currently, I am working on a react project and building a store within it. Below is the code snippet I have implemented: import React, { useReducer, useEffect } from 'react'; import { v4 as uuid } from 'uuid'; import { Movie, MoviesAct ...

reactjstypescriptreduxuse-reducer

Troubles with Jest tests are encountered when using ts-jest in an ES2020/ESNEXT TypeScript project

Currently, I am working on a VueJS project that utilizes ViteJS for transpilation, which is functioning properly. However, when Jest testing is involved alongside ts-jest, the following Jest configuration is used: jest.config.ts import { resolve } from &q ...

typescriptjestjs

The parameter type '(req: Request, res: Response, next: NextFunction) => void' does not match the type of 'Application<Record<string, any>>'

I'm currently working on an Express project that utilizes TypeScript. I have set up controllers, routers, and implemented a method that encapsulates my controller logic within an error handler. While working in my router.ts file, I encountered an err ...

node.jstypescriptexpress

Why isn't the parent (click) event triggered by the child element in Angular 4?

One of my challenges involves implementing a dropdown function that should be activated with a click on this specific div <div (click)="toggleDropdown($event)" data-id="userDropdown"> Username <i class="mdi mdi-chevron-down"></i> </d ...

angulartypescripteventsevent-bubbling

Encountering 'no overload matches this call' while developing a useReducer using React with Typescript

import { useCallback, useReducer } from "react"; const ARTIST_REDUCER_TYPES = { ADD: "ADD", }; const artistArray = [...Object.values(ARTIST_REDUCER_TYPES)] as const; type ActionReturnedTypes = (typeof artistArray)[number]; type Re ...

reactjstypescript

TypeScript compilation will still be successful even in the absence of a referenced file specified using require

Having both Project 1 and Project 2 in my workspace, I encountered an unusual issue after copying a file, specifically validators/index.ts, from Project 1 to Project 2. Surprisingly, TypeScript compilation went through successfully without showing any erro ...

typescriptwebstorm

Handlebar files are not compatible with Typescript loading capabilities

I am encountering an issue with my directory structure as follows : src |- server |- myServer.ts |- views |- myView.hbs dist |- server |- myServer.js The problem lies in the fact that the dist folder does not have a views subfolder, where the J ...

node.jstypescriptexpresshandlebars.js

What happens when arithmetic operators are applied to infinity values in JavaScript?

Why do Arithmetic Operators Behave Differently with Infinity in JavaScript? console.log(1.7976931348623157E+10308 + 1.7976931348623157E+10308)//Infinity console.log(1.7976931348623157E+10308 * 1.7976931348623157E+10308)//Infinity console.log(1.797693134 ...

javascripttypescripttypesecmascript-6operators

How to retrieve TypeScript object within a Bootstrap modal in Angular

Unable to make my modal access a JavaScript object in the controller to dynamically populate fields. Progress Made: Created a component displaying a list of "person" objects. Implemented a functionality to open a modal upon clicking a row in the list. ...

javascriptangulartypescript