Error message: "The property 'then' is not found when invoking Angular resolve."

I am encountering an issue while using Angular resolver to fetch data before loading the template. The specific error I am facing is as follows: Here is the code snippet for my resolver:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromPromise';

import { Router, Resolve, RouterStateSnapshot,ActivatedRouteSnapshot } from '@angular/router';

import { ApiService } from './api.service';

@Injectable()
export class ServiceResolve implements Resolve<any> {
  constructor(private apiservices: ApiService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    let JsonVal = JSON.parse(localStorage.getItem('RegistrationSteps'));
    let postData = {
      'token': JsonVal.auth_token
    }
    let url = 'getUserDetails';
    return Observable.fromPromise(this.apiservices.getUserDetailsByToken(postData,url));

  }
}

And here is a snippet of my service code:

 getUserDetailsByToken(data,url){
    let headers = new Headers();
    return this.http.post(this.base_url+url,data).map(ret=>ret.json());
  }

When trying to retrieve the data in my component, I utilize the following code:

let userData = this.route.snapshot.data['userdata'];
console.log(userData,'sssss');

Below is how my route configuration looks like:

{path:'signup',component:VendorRegistrationComponent,resolve:{userdata:ServiceResolve}},

The error message I am receiving reads as follows:

error TS2345: Argument of type 'Observable' is not assignable to parameter of type 'PromiseLike'. Property 'then' is missing in type 'Observable'.

Answer №1

The occurrence of this issue is due to the following reason:

return this.http.post(this.base_url+url,data).map(ret=>ret.json());

Instead of returning an Observable, you are attempting to read it as a Promise using Observable.fromPromise(...). To resolve this, simply update the code to

return this.apiservices.getUserDetailsByToken(postData,url);
and the problem will be resolved.

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

Forever waiting: Angular HTTP requests stuck in limbo

Switching from MongoDB to MySQL for my Angular/NodeJS project has brought about some challenges, particularly with handling HTTP Requests. I have tried GET and POST requests, but GET always remains pending and eventually fails, while POST does not successf ...

The HttpParams are reluctant to be established

Working with Angular 8, I am attempting to assign an HttpParam using the provided code snippet and observing the outcome on the final line. let newParams = new HttpParams(); newParams.set('ordering', 'name'); console.log('getting: ...

Tracking events in Angular 4 using angulartics2 and Adobe Analytics: A step-by-step guide

I've been working on tracking page views in my Angular 4 application, specifically with Adobe Analytics. Currently, I am utilizing angulartics2 for this purpose. First step was adding the necessary script for Adobe Staging in my index.html page: &l ...

Tips for troubleshooting compile errors when updating an Angular project from version 6 to 7

I am currently working on upgrading my Angular 6 project to Angular 10, following the recommended approach of going through one major version at a time. Right now, I am in the process of updating it to version 7.3. Despite following the steps provided on u ...

Using BehaviorSubject.next does not automatically refresh the view when using the async pipe

I am having trouble updating my Angular view with Google Places using the Google Places Js API and BehaviorSubject.next. The asynchronous pipe doesn't always reflect the updates immediately. Sometimes, it takes about 15 seconds for the view to update ...

Angular 4: Converting JSON Data into CSV Format

Can anyone assist me in converting a JSON file to CSV in Angular 4? Is there an existing external plugin that can help with this task? I came across a plugin called json2csv. However, I'm unsure of how to integrate it into my Angular 4 project. ...

How to host an Angular 2 application on IIS-10 without using ASP.NET Core

I've managed to create a plane angular-2 application using webpack in Visual Studio 2015 and now I'm looking to deploy it on IIS-10. Since I didn't use the ASP.NET Core template for this project, I need guidance on how to properly deploy thi ...

Ensure that the divs are properly aligned and construct columns within a single column

I've been working on creating a step bar that needs to adapt to any number of steps provided by the backend. Here's what I have so far: https://i.sstatic.net/cj4qZ.png It looks fine, but connecting the circles with bars would be beneficial. How ...

Tips for incorporating IntersectionObserver into an Angular mat-table to enable lazy loading功能?

I am looking to implement lazy loading of more data as the user scrolls down the table using IntersectionObserver. The container I am using is based on the Bootstrap grid system. However, despite using the code below, the callback function is not being tri ...

Executing a service request in Angular 2 using a versatile function

I have a function that determines which service to call and a function template for calling the service returned by that function. This function makes HTTP requests using http.get/http.post, which return an Observable and then perform a map operation on th ...

Nextjs REACT integration for self-service registration through OKTA

Attempting to integrate the Okta SSR feature for user sign-up in my app has been challenging as I keep encountering this error message: {"errorCode":"E0000060","errorSummary":"Unsupported operation.","errorLink& ...

The 'dateEmail' and 'dateSigned' properties are not found in the 'never' type

When using TypeScript, I encounter an error with the filter function while trying to filter a list: loanApplicantsFields.filter( dateField => dateField!.dateEmail !== null && dateField!.dateSigned !== null, ).length How do I p ...

Angular application making a POST request to a Spring REST API

I have developed a RESTful API using Spring Boot and a client application using Angular 4. Both applications are currently running locally. When testing the POST method with Postman, it functions correctly. However, when attempting to make a POST request f ...

Steps to refresh a variable when the SMS read plugin successfully completes

I'm attempting to make a post call within the success callback of my SMS read plugin code. I can successfully print _this.otpnumber in the console. Please refer to my stack trace image link getSMS(){ var _this= this; var fil ...

Create a new ASP.NET MVC project and integrate Angular 2 for a dynamic web application

I'm currently delving into the world of Angular 2 with Typescript. The primary resource I am using is QuickStart with Angular 2. From this and other examples, it has been emphasized to create a package.json file that outlines all dependencies for th ...

Breaking down a JSON Object in Angular 4: Step-by-step Guide

I am working on integrating a JSON API with an Angular 4 frontend, and my goal is to display the data from this JSON Object. Here is the code I have used: <div *ngFor="let Questionnaire of struc.data"> <span>{{Questionnaire.attributes.con ...

Showcasing a selection of items from an array using Angular

I'm struggling with a particular implementation. I have an array filled with objects, and I only want to display the "name" property of those objects in a dropdown menu. When a user selects an option, I would like to access the entire object. Is this ...

Tips for compressing a node.js typescript backend project?

Here's a glimpse of my webpack.config.js file: const path = require('path'); var fs = require('fs') var nodeModules = {}; fs.readdirSync('node_modules').filter(function (x) {return ['.bin'].indexOf(x) === -1;}) ...

A series of functions with designated return types passed to the subsequent function

I have a vision to craft an innovative array that is filled with functions. const a = [ (): { a: string } => ({ a: 'alpha'}), ({ a }): { b: string } => ({ b: 'beta' }), ({ a, b }): {} => ({}), ] The functions are speci ...

Unable to retrieve any response data in Angular 2

I'm having trouble retrieving the response from my API. Despite being able to do so with PostMan, my variable "this.data" remains null. I've experimented with various approaches to no avail. Any assistance would be greatly appreciated. The method ...