I'm having trouble with this function - every time I try to run ng serve in Angular, I keep getting hit with a syntax error

Every time I run ng serve, it gives me a syntax error. It will indicate that something like ;, ), or , is missing. The strange thing is that if you remove one of these characters, save the code, and then run ng serve again, it will work perfectly. However, the next time you run ng serve, you will encounter a similar error and have to add back the character you removed last time in order for it to work again. Here is the problematic code snippet:

 OnFileSelected(event) {
    const file: File = event[0];

    this.ReadAsBase64(file)
      .then(result => {
        this.selectedFile = result;
      })
      .catch (err => {this.error = err; setTimeout(() => {this.error = ''; }, 2000; } );  )

  }

All these errors with , ; ) or } are occurring here:

 .catch (err => {this.error = err; setTimeout(() => {this.error = ''; }, 2000; } );  )

      }

What is the solution to fixing this issue?

Answer №1

ought to be

.catch(err => { this.error = err; setTimeout(() => { this.error = ''; }, 2000) }  )

or even better

const file: File = event[0];

this.ReadAsBase64(file)
    .then((result) => {
        this.selectedFile = result;
    })
    .catch((err) => {
        this.error = err;
        setTimeout(() => {
            this.error = '';
        }, 2000);
    });

since it is more readable, the placement of semicolons and brackets needs adjustment

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

The loading of local resources like electron/angular/electron-builder is restricted

I'm currently developing an electron application that utilizes angular. Nevertheless, I encounter an error when attempting to package the app with electron-builder: The following error message is displayed: Not allowed to load local resource: file:// ...

It appears that there may be an issue with the routing link path

After creating a .net core class in the backend and successfully passing data to an Angular 8 application within Visual Studio, everything seems to be working fine. However, upon running the application, I encountered an issue where clicking on the "fetch- ...

Combining subclasses in TypeScript

Do you need help with a tricky situation? ...

What is the best approach to creating a Typescript library that offers maximal compatibility for a wide range

My Vision I am aiming to develop a versatile library that can cater to both JavaScript and TypeScript developers for frontend applications, excluding Node.js. This means allowing JavaScript developers to utilize the library as inline script using <scri ...

Implementing routing for page navigation within an angular tree structure

Can someone assist me with integrating a route into an angular tree structure? Here is the HTML code snippet: <mat-tree [dataSource]="dataSource" class="tree-container" [treeControl]="treeControl"> <mat-tree-node class="btnLinks" *matTreeN ...

Limiting the use of TypeScript ambient declarations to designated files such as those with the extension *.spec.ts

In my Jest setupTests file, I define several global identifiers such as "global.sinon = sinon". However, when typing these in ambient declarations, they apply to all files, not just the *.spec.ts files where the setupTests file is included. In the past, ...

Dealing with Angular State Management Across Components (Direct Dependency): encountering a NullInjectorError - R3InjectorError

I have encountered a NullInjectorError in my Angular application and I am seeking assistance in resolving it. To provide context, my application consists of three main components: ProductRegistrationAndListingScreen, ProductList, and ProductRegistration. ...

What is the process for obtaining a flattened tuple type from a tuple comprised of nested tuples?

Suppose I have a tuple comprised of additional tuples: type Data = [[3,5,7], [4,9], [0,1,10,9]]; I am looking to develop a utility type called Merge<T> in such a way that Merge<Data> outputs: type MergedData = Merge<Data>; // type Merged ...

Webpack is unable to properly parse TypeScript files, resulting in a module parse error that states: "Unexpected token

While working on an old project, I decided to set up Typescript and Webpack. However, I ran into a sudden error: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js ...

Collaborative Troubleshooting of Observable Errors

I'm currently exploring the functionality of the Observable that is returned when using the http.get() method in Angular 2. Take a look at my code snippet below... let observable = this.http.get(this.url) if (this.share) { observable = observable.s ...

Can a discriminated union be generated using mapped types in TypeScript?

Imagine you have an interface called X: type X = { red: number, blue: string } Can a union type Y be created using mapped types? If not, are there other ways to construct it at the type level? type Y = { kind: "red" payload: number } | ...

The use of the 'OR' operator with objects is not producing the desired results

When working with two different object types and a function that accepts either one as input, why am I getting an error in TypeScript? export default function Eingabefeld({ isText=true, children="", }:( { isText: true, ...

Creating dynamic text bubble to accommodate wrapped text in React using Material-UI (MUI)

I am currently developing a chat application using ReactJS/MUI, and I have encountered an issue with the sizing of the text bubbles. The bubble itself is implemented as a Typography component: <Typography variant="body1" sx={bubbleStyle}> ...

What is the method for utilizing Tuple elements as keys in a Mapped Type or template literal within typescript?

Is there a specific way to correctly type the following function in TypeScript? Assuming we have a function createMap() that requires: a prefix (e.g. foo) and a tuple of suffixes (e.g. ['a', 'b', 'c']) If we call createMap(& ...

Angular HTTP request with a modified number parameter in the URL

I thought this would be a simple task, but for some reason I can't seem to get it right. I am working on an ionic app for a wordpress blog and trying to retrieve a single post by its id. I have confirmed that the id is being passed correctly, but when ...

Despite configuring my httpheaders, I am encountering an access denied error when trying to retrieve an HTTP header

I have retrieved a list of users from a database using a Spring Boot API. Each user in the list has different attributes such as username, id, first name, last name, registration date, and profile photo. The profile photo is identified by an image ID whic ...

Angular 10 does not reflect changes in the array when they occur

My component receives an array of offers from an Observable. However, when the list is modified (a offer is deleted), the component's list does not update accordingly. I attempted to use ngOnChanges to resubscribe to the list and update it in my comp ...

Guide to building a static method generator in TypeScript

Currently, I am working on creating a static method factory function in TypeScript. In my previous implementation using ES6, everything was functioning well and meeting my expectations. However, upon transitioning to TypeScript, I encountered a type-castin ...

Should a MEAN stack app require the use of two servers in order to run?

Currently, I am in the process of developing a MEAN stack application which involves using MongoDB, ExpressJs, Angular 6, and NodeJs. One issue I am facing is determining whether two servers will be necessary to run the app simultaneously. Specifically, o ...

Enhancing the Angular Community Library Project

I am currently working on an Angular project version 7.1 and have developed 2 angular libraries that are being used in the project. In order to upgrade my project from version 7.1 to 8.2, I used the following command: ng update @angular/cli@8 @angular/core ...