The type 'Observable<HttpEvent<DeviceList>>' cannot be assigned to the type 'Observable<DeviceList>'

// FUNCTION TO RETRIEVE DEVICE LIST
fetchDeviceList(): Observable < DeviceList > {
  this.setToken();
  return this.http.get<DeviceList>(this.api_url + '/devices', this.httpOptions1)
    .retry(2);
}

I am facing a challenge in this particular situation. I have defined the model and am attempting to retrieve the devicelist. I have integrated the model into the api.service file, but encountered the following error:

ERROR in src/app/services/api.service.ts(86,9): error TS2322:
  Type 'Observable<HttpEvent<DeviceList>>' is not assignable to type 'Observable<DeviceList>'.
  Type 'HttpEvent<DeviceList>' is not assignable to type 'DeviceList'.
  Type 'HttpProgressEvent' is not assignable to type 'DeviceList'.
  Property 'device_family' is missing in type 'HttpProgressEvent'.
angulartypescript

Answer №1

Currently utilizing Angular 7 which is compatible with Rxjs 6.3

The method for incorporating operators is as follows:

getItems(): Observable<ItemList> {
  this.setToken();
  return this.http.get<ItemList>(this.api_url + '/items', this.httpOptions1)
    .pipe(
      retry(2)
    );
}

Take a look at this Functional Example on StackBlitz for reference.

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

get a duplicate of an object

Is this the proper method for creating a duplicate of an object? class ObjectWrapper { private _obj; /*** * Copy object passed as argument to this._obj */ constructor (_obj: Object) { this._obj = _obj; } /** Return copy of this._ ...

javascripttypescriptobject

Encountering path import errors when developing a sample webpack site within a TypeScript library

Struggling to integrate my custom library with TypeScript and Webpack. Import errors are causing headaches, despite smooth sailing in CLion. Running tsc within the project directory is error-free, unlike when running npm run dev in the examples/webpack di ...

javascripttypescriptnpmwebpackmodule

Clearing a leaflet layer after a click event: Step-by-step guide

When working with my map, I attempt to toggle the layer's selection using a mouse click. Initially, my map looks like this: https://i.sstatic.net/lOI95.png Upon clicking a layer, my goal is to highlight and select it: https://i.sstatic.net/63Rx2.pn ...

javascriptangularleaflet

Implementing an interface with a variable key and defining the key simultaneously

I am trying to design an interface with a fixed key, as well as a variable key, like this : interface Data { api?: { isReady: boolean; }; [key: string]: string; } This setup gives me the following error message : Property 'api' of typ ...

typescript

Issue with text displaying as "-webkit-standard" in font dropdown menu on Safari browser detected in Tinymce

There seems to be a Tinymce bug where the text "-webkit-standard" shows up in Safari's font dropdown. As seen in the attached image, it appears once in Chrome (-webkit-standard) and again in Safari. Has anyone else encountered this issue? https://i.ss ...

angulartinymce

Typescript is failing to infer the definition of an object, even after conducting a thorough check

I am encountering an issue with the code structure below: interface Data { isAvailable: boolean; } const foo = (data: Data | undefined, error: boolean) => { const hasError = error || !data; if (!hasError) { if (data.isAvailable) // do so ...

typescript

Issue: The canActivateChild method in the child guard is not functioning as

Following the Angular documentation, I attempted to implement a child guard in my code: @Injectable() export class AuthGuardService implements CanActivate, CanActivateChild { constructor(private authService: AuthentificationService, private router: Rou ...

angular

When working with Angular and either Jasmine or Karma, you might encounter the error message: "Unexpected state: Unable to retrieve the summary for the

I've been struggling to fix this error and so far, nothing I find online is helping... lr-categories.component.spec.ts: export function main() { describe('LrCategoriesComponent', () => { let fixture: ComponentFixture<LrCategori ...

angularjasminekarma-runner

Is there a way to customize the pagination layout of primeNG paginator in an Angular project

I've been struggling to customize the primeNG paginator in my Angular application. Specifically, I am trying to style the dropdown that lets users select the number of data entries. Despite my efforts to figure it out, I have not been successful in st ...

cssangularprimengprimeng-dropdowns

rxjs - straightforward issue with initiating observables

I'm currently tackling an assignment that involves setting up a basic form with input fields for 'From', 'To', and 'Duration' using rxjs. While it might be easier to just utilize getter / setters, I'm determined to ...

angularrxjs

Issues with mat-tab-group not rendering properly after switching between parent tabs

I am facing an issue involving nested tabs and tables in my example. Check out the example here After switching between parent tabs and child tabs, there seems to be an issue where the tabs do not render properly. It takes multiple attempts of switching ...

angulartypescriptangular-materialmat-tab

Tips for submitting a request following a change in the variable

I am in the process of developing a React application and I have implemented Auth0 for authentication. My goal is to initiate an HTTP request upon page refresh, but only if the variable isLoading is false. This way, I can access the user object once the ...

javascriptreactjstypescriptnext.js

Is it possible to create a distinctive property value within an ngFor loop that operates autonomously across two child components?

I am working on a functionality where, upon clicking on a specific car brand, the name of the person and their favorite car will be displayed at the bottom. However, I'm facing an issue where the car brand is being repeated among all items in the ngFo ...

angulartypescriptfrontend

Trying to filter an array of number|undefined in TypeScript to only include numbers is not identified as an array of numbers

Below is the code snippet: type TEntity = Array<{ size?: number }> const someVar: TEntity = //@ts-ignore getFromSomewhere() function isNumber(input: any): input is number { return !isNaN(Number(input)) } const sizes1: number[] = so ...

typescript

How can you first fetch a small number of records from the service and then the remaining ones?

Is there a way to fetch the initial few records from a service followed by the rest of the records? My datatable service currently loads all entries at once, causing delays in loading time. I am looking for a solution where only a portion of the records ca ...

angular

Unable to utilize ngForm when values are already predefined

I have an Angular application with Ionic 4. Here is the HTML code for my form: <form #formAuth="ngForm" (ngSubmit)="sendCode(formAuth)" method="post"> <ion-select placeholder="Country" ngModel name="area_code" interface="modal"> <io ...

angulartypescript

Answer found: How to effectively filter data arrays in a React client application

I've been working on mapping the GraphQL data onto a React app and I'm facing an issue with making the filtration dynamic for user input. Currently, I am using .filter() to apply client-side filtration but struggling to figure out how to make it ...

javascriptreactjstypescriptfiltergraphql

Problem with selecting dates in rangepicker

Having trouble with my recursion code for selecting dates in a rangepicker: recurse( () => cy.get('.mantine-DatePicker-yearsListCell').invoke('text'), (n) => { if (!n.includes(year)) { //if year not f ...

typescriptcypresscypress-recurse

The BullMQ library is optimizing performance by efficiently managing Redis connections

Currently, I'm in the process of implementing logic to efficiently reuse redis connections with bullMQ by referring to this specific section in the bullMQ documentation. My setup involves utilizing the latest BullMQ npm version (1.80.6). As per the ...

typescriptioredisbullmq

What is the best way to generate inner HTML components within Angular by creating components?

I want to create a custom component that functions similarly to Material Tabs. I currently can use Material Tabs to create tabs like this <mat-tab-group mat-align-tabs="center"> <mat-tab label="First Tab"> <p& ...

angularangular-material