unexpected complication during the construction of an Angular 5 application

I have been working on an application where I receive an object from an HTTP request and convert it into an iterable array. During development mode, the code sometimes runs without any issues but occasionally gives me random errors like the one below. However, when I try to run 'ng build --prod', I consistently encounter the same error which has become a roadblock for me.

Can anyone point out what I might be missing?


         Object.keys(res['com'][element]['schema']['properties']).forEach(inputKey => {
              this.newfdata[element]['properties'].push(res['com'][element]['schema']['properties'][inputKey]);

        }

       // this is line no. 223
                this.objectProps = Object.keys(res['com'][element]['schema']['properties']).map(prop => { 

          return Object.assign({}, { key: prop} , res['com'][element]['schema']['properties'][prop]);

        // this is line no. 228
          });

The mentioned lines are resulting in the error message below:

ERROR in src/app/shared/layout/add.component.ts(223,5): error TS1005: ',' expected.
src/app/shared/layout/add.component.ts(228,11): error TS1005: ')' expected.

Your assistance with this issue would be greatly appreciated as it is preventing the app from entering production mode entirely.

Thank you in advance.

Answer №1

It appears that you have closed the forEach loop before properly closing the input key function, which may be causing the error. I suggest making a change to line number 223 as shown below, this should hopefully resolve the issue.

 Object.keys(res['com'][element]['schema']['properties']).forEach(inputKey => {
          this.newfdata[element]['properties'].push(res['com'][element]['schema']['properties'][inputKey])

    }); // don't forget to close forEach 

   // now check line no. 223
            this.objectProps = Object.keys(res['com'][element]['schema']['properties']).map(prop => { 

      return Object.assign({}, { key: prop} , res['com'][element]['schema']['properties'][prop]);

    // check line no. 228
      });

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

Encountering an issue with Angular Material's MatTable when trying to set the datasource data to an interface

My angular material mat-table previously used a data type interface, which looked like this: dataSource : MatTableDataSource<IAddress>; dataSource.data = this.testData; interface IAddress { name: string; address: string: city: string; state: ...

Oops! There seems to be an issue: Uncaught promise error - ReferenceError: google is not defined

I've integrated Angular 2 with Google Maps Places Autocomplete in my project, but I encountered an error: ERROR Error: Uncaught (in promise): ReferenceError: google is not defined Here's the HTML snippet: <agm-map id="googleMap"> ...

Using RxJS's first() method with Observable.of() returns no elements in the sequence

During my testing process, I am attempting to simulate an event stream using Observable.of(). However, I encounter an issue when implementing it as shown below: const actions$ = Observable.of({}); ... // within the function being tested actions$ .filter ...

Eliminating the InMemoryWebApiModule in the production configuration of webpack for Angular applications

Currently, I am utilizing the InMemoryWebApiModule to simulate my data during development, but I want to prevent it from being used in a production environment. Is there a method to exclude it from being used in production on webpack? I have been attempt ...

Seed for Angular2/Angular that uses http-proxy-middleware to forward API requests

Currently, I am utilizing the Angular Seed project and attempting to configure a proxy for API requests directed towards a backend service that operates on a separate port. This is what my code looks like at this point: /* Incorporate proxy middleware */ ...

Using ng-bootstrap's NgbDropdown component within a higher-level parent component

I am working with NgbDropdown and have the following code snippet: <div ngbDropdown class="d-flex justify-content-end"> <button class="btn" id="dropdownMenu" ngbDropdownToggle>Toggle dropdown</button> &l ...

Angular2 - Retrieve data in XLS format from RestService并下载

I am looking to create a web service using Apache POI to generate an Excel file (xls, xlsx). Below is the snippet of code I have put together: @RequestMapping(value = "/export", method = RequestMethod.GET) public void exportXlsx(HttpServletResponse respon ...

In socket.io, the event occurs twice in a row

I am encountering an issue with my socket.io nodejs cluster setup in my project where the same event is triggered twice. Despite trying different versions of Socket.io, the problem persists and two instances of the same event are being emitted. The current ...

I am looking to update the color based on the prop value in React

Currently using react along with typescript. My objective is to adjust the color based on the value passed through props. The props will contain either "primary," "secondary," or "brand" as a string type. When the value "primary" is provided, I aim ...

Express Server with Angular2 -- Application frozen on "Loading screen..."

After building a MEAN stack JS application from scratch using Angular-CLI and node/npm, I successfully set up the front end with ng serve. However, when I tried to create the back end using the provided server code and running 'node server' in th ...

Input field for postal code containing only numbers (maximum 5 digits) in Angular version 4/5

I am struggling with creating an input field that accepts numbers. If I use type="text", I can only type 5 characters of alphanumeric data, but if I use type="number", it allows any number input without limiting it to just 5 numbers. Thank you in advance f ...

Is there a way to trigger resolvers again in Angular using runGuardsAndResolvers and onSameUrlNavigation?

I have an edit form and I am using resolvers to pre-fetch the data for filling the form. My goal is to have the resolver re-used when the user clicks the browser refresh button. Currently, the data is not retrieved again, possibly because it is called with ...

Exploring the Concepts of Union and Intersection Types in Typescript

I am trying to wrap my head around Union and Intersection types in TypeScript, and I've come across a case that's puzzling me. You can check it out on this Playground Link interface A { a: number; } interface B{ b: boolean; } type Un ...

Is there a commonly accepted method for setting up an Express.js server using organization and bootstrap techniques?

As someone who is new to Node.js and the JavaScript realm, transitioning from a PHP environment, I am encountering an issue. Many PHP frameworks handle the heavy lifting of bootstrapping the application (setting up the server, middleware, logger, configura ...

Can someone confirm if I am importing this png file correctly? I am encountering an error with Vite, here is my code

Error: TypeScript+ React + Vite [plugin:vite:import-analysis] Failed to find import "./assets/heropic.png" in "src\components\Hero.tsx". Are you sure the file exists? Hello fellow developers! I am new to working with react and typescript. Curren ...

Angular 4 - custom validator function not properly defined

I am currently developing an application that includes a FormComponent. Within this component, I am utilizing the reactive forms module from Angular core to create a custom validator. When calling a function from within another function using 'this&ap ...

Example of TypeScript Ambient Namespace Usage

The Namespaces chapter provides an example involving D3.d.ts that I find puzzling. Here is the complete example: declare namespace D3 { export interface Selectors { select: { (selector: string): Selection; (element: ...

What methods can you use to handle user roles and permissions in Angular 2?

Working on a brand new Angular2 app has raised some important questions for me. Specifically, I'm curious about the best way to manage routes that are only accessible to certain roles with specific permissions for creating, editing, and deleting items ...

Error encountered when attempting to resolve all parameters for ApplicationModule: (?)

After converting an application module into an importable library, I am facing issues with getting the tests to work properly. An error message stating "Error: Can't resolve all parameters for ApplicationModule: (?)" keeps appearing: Error: Can' ...

Invalid for the purpose of storage

Encountering the following error message: The dollar ($) prefixed field '$size' in 'analytics.visits.amounts..$size' is not valid for storage. return Manager.updateMany({}, { $push: { & ...