How to Resolve a Typescript Promise Syntax Error?

Question

How to Resolve a Typescript Promise Syntax Error?

I have been working on creating a login authorization system to secure certain routes in an angular application, but I keep encountering a TypeScript error in the auth-guard.service during compilation. Despite my efforts, I am unable to pinpoint the issue. Below is the code for auth-guard.service:

 import { CanActivate,
        ActivatedRoute,
        RouterStateSnapshot,
        ActivatedRouteSnapshot,
        Router
    } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';

import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private authService: AuthService, private router: Router ) {}

    canActivate(route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean  {
                    return this.authService.isAuthenticated()
                        .then(
                            (authenticated: boolean) => {
                                if (authenticated) {
                                    return true;
                                } else {
                                    this.router.navigate(['/']);
                                    return false;
                                }
                            }
                        );

    }
}

The error message I'm seeing reads as follows:

ERROR in src/app/auth-guard.service.ts(19,26): error TS2339: Property 'then' does not exist on type 'void'.

Here is the content of my auth-service.ts:

export class AuthService {
    loggedIn = false;

    isAuthenticated() {
        const promise = new Promise (
            (resolve, reject) =>  {
                setTimeout(() => {
                    resolve(this.loggedIn);
                }, 800);
            }
        );
    }

    login() {
        this.loggedIn = true;
    }

    logout() {
        this.loggedIn = false;
    }
}

Do I need to define a return value for isAuthenticated? What could be causing this issue?

Thank you in advance for any assistance...

angular typescript

Answer 1

Answer №1

It is essential to ensure that the promise is returned:

verifyUser() {
  return new Promise ((resolve, reject) =>  {
    setTimeout(() => {
      resolve(this.userVerified);
    }, 800);
  });
}

You also have the option of specifying its return type as follows:

verifyUser(): Promise<boolean> {
  ...
}

Answer 2

It is essential to ensure that the promise is returned:

verifyUser() {
  return new Promise ((resolve, reject) =>  {
    setTimeout(() => {
      resolve(this.userVerified);
    }, 800);
  });
}

You also have the option of specifying its return type as follows:

verifyUser(): Promise<boolean> {
  ...
}

Answer 3

Answer №2

In order to properly handle authentication, the isAuthenticated method should always return a promise.

isAuthenticated() {
   const authPromise = new Promise (
      (resolve, reject) =>  {
         setTimeout(() => {
            resolve(this.userLoggedIn);
         }, 800);
      }
   );
   return authPromise;
}

Answer 4

In order to properly handle authentication, the isAuthenticated method should always return a promise.

isAuthenticated() {
   const authPromise = new Promise (
      (resolve, reject) =>  {
         setTimeout(() => {
            resolve(this.userLoggedIn);
         }, 800);
      }
   );
   return authPromise;
}

Answer 5

Answer №3

To simplify the process, you can convert the method to async, which will automatically return a Promise without the need for using return new Promise()

async isAuthenticated() {
        new Promise (
            (resolve, reject) =>  {
                setTimeout(() => {
                    resolve(this.loggedIn);
                }, 800);
            }
        );
    }

Another approach is to create a wait helper function for better readability:

async isAuthenticated() {
        await wait(800);
       resolve(this.loggedIn);
    }

async wait(ms: number) {
  return new Promise((resolve) => {
      setTimeout(() => resolve(), ms);
   });
}

Answer 6

To simplify the process, you can convert the method to async, which will automatically return a Promise without the need for using return new Promise()

async isAuthenticated() {
        new Promise (
            (resolve, reject) =>  {
                setTimeout(() => {
                    resolve(this.loggedIn);
                }, 800);
            }
        );
    }

Another approach is to create a wait helper function for better readability:

async isAuthenticated() {
        await wait(800);
       resolve(this.loggedIn);
    }

async wait(ms: number) {
  return new Promise((resolve) => {
      setTimeout(() => resolve(), ms);
   });
}

How to Resolve a Typescript Promise Syntax Error?

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting error messages with Angular 2 HttpClient response payload

The utilization of React.Component inheritance in TypeScript

Initializing various objects on the same interface type array in one line

Encountered issue with accessing the Error Object in the Error Handling Middleware

Understanding how to pinpoint a particular request within an Angular 5 HTTP Interceptor

Encountering Typescript issues while trying to access @angular/core packages

Warning: Obsolescence of Typescript Detected

The tsconfig.json file does not support the path specified as "@types"

Implementing undefined value acceptance in yup object when using Material-UI

The shape-matching subset functionality in Typescript is experiencing issues

Component re-rendering and initializing useReducer

Turn TypeScript - Modify type properties to reflect types of their descendants

The art of combining Angular 6 with CSS styling for dynamic

Preventing click propagation for custom react components nested within a MapContainer

The Angular2 Observable fails to be activated by the async pipe

Ways to adjust the ngx-pagination color scheme?

Specific generic types do not incorporate abstract type context

The error message "NextFunction does not have the property 'render'" appears when using Angular Universal in conjunction with Express

Restrain a Key according to the data type of its value within a universal category

Making sure the checkbox stays selected in an angular environment