Error: The terminal reports that the property 'then' cannot be found on the data type 'false' while trying to compile an Angular application

Question

Error: The terminal reports that the property 'then' cannot be found on the data type 'false' while trying to compile an Angular application

In my Angular application, which I initiate through the terminal with the command ng serve, I am encountering build errors that are showing in red on the terminal screen.

✔ Compiled successfully.
⠋ Generating browser application bundles...
    Error: src/app/components/posting/posting.component.ts:343:78 - error TS2339: Property 'then' does not exist on type 'false | Promise<unknown>'.
      Property 'then' does not exist on type 'false'.

    343 this.getVideoMediaData(file).then(a => this.validateFileAgainstConfig('instagram'));
                                                                                     ~~~~
✔ Browser application bundle generation complete.

The issue seems to be related to the getVideoMediaData() function which is structured like this:

    public getVideoMediaData(file) {
        if (typeof file === 'undefined') {
            return false;
        }

        return new Promise((resolve, reject) => {
            this.postingService.getMetadata(file.url).subscribe(
                data => {
                    resolve(data);
                    const errors = data.errors;
                    file.errors = [];
                    if (errors && errors.length > 0 ) {
                        errors.forEach(function(ffmpegError) {
                            file.errors.push({
                                'message': ffmpegError,
                                'validation': 'ffmpeg'
                            });
                        }, this);
                    }
                },
                errorResponse => {
                    reject(errorResponse);
                }
            );
        });
    }

I need help understanding why this error is occurring and how I can address it to prevent it from appearing in the terminal after completing ng serve.

Expected outcome: Successful completion of ng serve without any build errors.

Actual outcome: Even after running ng serve, the app builds but still shows the "Property 'then' does not exist on type 'false'" error in the terminal.

javascript angular typescript

Answer 1

Answer №1

The initial 'if' statement does not return a Promise. To rectify this, you can enclose false within Promise.resolve(false), or mark the method as async to resolve the issue.

Additional point to note:

Ensure you check for the truthiness of the file variable since it also includes null in addition to undefined:

async getVideoMediaData(file): Promise<boolean> {
        if (!file) return false;

        return new Promise((resolve, reject) => {
            this.postingService.getMetadata(file.url).subscribe(
                data => {
                    resolve(data);
                    const errors = data.errors;
                    file.errors = [];
                    if (errors && errors.length > 0 ) {
                        errors.forEach(function(ffmpegError) {
                            file.errors.push({
                                'message': ffmpegError,
                                'validation': 'ffmpeg'
                            });
                        }, this);
                    }
                },
                errorResponse => {
                    reject(errorResponse);
                }
            );
        });

}

Addendum:

Consider using toPromise() (for RxJS versions 6 and below) or firstValueFrom (for RxJS versions 7 and above) to convert the service observable into a Promise.

async getVideoMediaData(file): Promise<boolean> {
        if (!file) return false;

        // if utilizing RxJS 6 or earlier
        const data = await this.postingService.getMetadata(file.url).toPromise()
        // RxJS 7 onwards
        const data = await firstValueFrom(
            this.postingService.getMetadata(file.url)
        )
        const errors = data.errors;
        file.errors = [];
        if (errors && errors.length > 0 ) {
            errors.forEach(function(ffmpegError) {
                 file.errors.push({
                     'message': ffmpegError,
                     'validation': 'ffmpeg'
                  });
            }, this);
         }
       return data
}

Note:

I recommend refraining from using anonymous functions when dealing with JS arrays and opting for fat arrows instead to avoid issues related to this. Additionally, employing map is preferable over using forEach for mapping and pushing elements:

file.errors = Array.from(data.errors ?? []).map(ffmpegError => ({message: ffmpegError, validation: 'ffmpeg'}))

Answer 2

The initial 'if' statement does not return a Promise. To rectify this, you can enclose false within Promise.resolve(false), or mark the method as async to resolve the issue.

Additional point to note:

Ensure you check for the truthiness of the file variable since it also includes null in addition to undefined:

async getVideoMediaData(file): Promise<boolean> {
        if (!file) return false;

        return new Promise((resolve, reject) => {
            this.postingService.getMetadata(file.url).subscribe(
                data => {
                    resolve(data);
                    const errors = data.errors;
                    file.errors = [];
                    if (errors && errors.length > 0 ) {
                        errors.forEach(function(ffmpegError) {
                            file.errors.push({
                                'message': ffmpegError,
                                'validation': 'ffmpeg'
                            });
                        }, this);
                    }
                },
                errorResponse => {
                    reject(errorResponse);
                }
            );
        });

}

Addendum:

Consider using toPromise() (for RxJS versions 6 and below) or firstValueFrom (for RxJS versions 7 and above) to convert the service observable into a Promise.

async getVideoMediaData(file): Promise<boolean> {
        if (!file) return false;

        // if utilizing RxJS 6 or earlier
        const data = await this.postingService.getMetadata(file.url).toPromise()
        // RxJS 7 onwards
        const data = await firstValueFrom(
            this.postingService.getMetadata(file.url)
        )
        const errors = data.errors;
        file.errors = [];
        if (errors && errors.length > 0 ) {
            errors.forEach(function(ffmpegError) {
                 file.errors.push({
                     'message': ffmpegError,
                     'validation': 'ffmpeg'
                  });
            }, this);
         }
       return data
}

Note:

I recommend refraining from using anonymous functions when dealing with JS arrays and opting for fat arrows instead to avoid issues related to this. Additionally, employing map is preferable over using forEach for mapping and pushing elements:

file.errors = Array.from(data.errors ?? []).map(ffmpegError => ({message: ffmpegError, validation: 'ffmpeg'}))

Error: The terminal reports that the property 'then' cannot be found on the data type 'false' while trying to compile an Angular application

Answer №1

Similar questions

Angular: merging object values into a single string by looping over them

Problem with Next.js router language settings

Discovering the culprit causing a freeze on your page: Uncovering the tool or technique to identify the problematic

Managing elements within another element in Angular

Having trouble with passing the callback for nested mysql queries in Async.waterfall?

Failure to display React component on screen

What is the best way to achieve this in Node.js/Express using Redis? Essentially, it involves saving a callback value to a variable

Numerous input fields available for AJAX auto-complete functionality and name verification

Password validation with Mongoose customization

The WebView.HitTestResult method is currently only receiving <img src> elements and not <a href> elements

The ng-view directive within AngularJS appears to be malfunctioning

The dynamic value feature in Material UI React's MenuItem is currently experiencing functionality issues

How can we leverage jQuery deferred within Backbone Marionette composite views, where each items view contains a form, to execute a task after each form submission is successful?

The navigation bar is positioned with white space above it

Is it necessary for TypeScript classes that are intended for use by other classes to be explicitly exported and imported?

Retrieving external JSON data with JavaScript

Astro Project experiencing issues with loading SRC folder and style tags

"Extra loader required to manage output from these loaders." error encountered in React and Typescript

Tips for identifying MIME type errors in an Angular 9 application and receiving alerts

Switching from using jQuery to Mootools in a short script that helps to balance the heights of