Discover the magic of integrating FeathersJS REST functionality within Angular with these simple steps

I've encountered a challenge while trying to make Feathers work in Angular with a Feathers REST server. It seems that no requests are being made.

My Feathers server hosts the resource http://example.com/app/experiences which returns data in paginated Feathers format:

{
    "total": 1,
    "limit": 10,
    "skip": 0,
    "data": [
        {
            "_id": "5db5ef8dc64f59001d750c72",
            ... etc ..,
        }
    ]

On the client side, I have a centralized Feathers service configuration:

@Injectable()
export class Feathers {
  private _feathers = feathers();                     
  private feathersRestClient = feathersRestClient('http://example.com/app');

  constructor() {
    this._feathers
      .configure(this.feathersRestClient.angular)
      .configure(rx({                          
        idField: '_id'
      }));

    this._feathers.use('/experiences', new FeathersGenericService());
  }

  // expose services
  public service(name: string) {
    return this._feathers.service(name);
  }
}

The FeathersGenericService is a generic class obtained from :

export class FeathersGenericService implements ServiceMethods<any>  {
  async find(params: Params) {}
  async get(id: Id, params: Params) {}
  async create(data: any, params: Params) {}
  async update(id: NullableId, data: any, params: Params) {}
  async patch(id: NullableId, data: any, params: Params) {}
  async remove(id: NullableId, params: Params) {}
}

Next, I have a simple ExperienceService that retrieves the first 25 results:

export class ExperienceService {

  constructor(private feathers: Feathers) { }


  experiences$() {
    return from((this.feathers
      .service('experiences'))
      .watch()
      .find({
        query: {
          $limit: 25
        }
      }));
  }        

}

And lastly, the component:

export class ExperienceListComponent implements OnInit {
  experiences$: Observable<any[]>;

  constructor(private eservice: ExperienceService) {}

  ngOnInit() {
    this.eservice.experiences$().subscribe(res => {
      console.log(res);
      return res;
    });
  }
}

However, the variable "res" turns out to be undefined... I checked the network tab and noticed that no request was sent to the API.

What could I possibly be doing wrong?

EDIT: I've created a Stackblitz demo here: https://stackblitz.com/edit/angular-qfysld

There's a known bug with using Feathers in Stackblitz, making it fail to compile there but works fine when downloaded and run locally.

Answer №1

import { from } from 'rxjs';
...
return from(this.feathers
      .service('/experiences')
      .find({
        query: {
          $limit: 25
        }
      }));

To transform the Promise returned by the Feathers find method into an Observable, use the from operator provided by RxJS.

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

Validate certain elements within a form group in a wizard

Within my 2-step wizard, there is a form group in the first step. When the next page button is clicked on the first step, I want to validate the elements in that form group. My questions are: 1 - Would it be more effective to use 2 separate forms in each ...

"Enhancing the appearance of mat-sidenav elements in Angular Material 7 with customized

Our previous dom-structure before upgrading to Angular 7 and Material 7 looked like this: <mat-sidenav-container> <mat-sidenav #sidenav mode="side" [opened]="sideNavOpen"> <ul> <li> <a mat-icon-button color ...

What is the best way to simulate a constructor-created class instance in jest?

Suppose there is a class called Person which creates an instance of another class named Logger. How can we ensure that the method of Logger is being called when an instance of Person is created, as shown in the example below? // Logger.ts export default cl ...

Implement ExpressTS on vercel platform

I have recently developed an Express TypeScript project on GitHub and now I am attempting to deploy it to Vercel. The folder structure of the project is as follows, with 'dist' containing app.js and 'src' containing app.ts. dist dto mi ...

What is the relationship between Typescript references, builds, and Docker?

I am facing a dilemma with my projectA which utilizes a common package that is also needed by my other Nodejs services. I am unsure of the best approach to package this in a Docker file. Ideally, running tsc build would compile both the project and the dep ...

Unable to bring in an exported class from a TypeScript file

I have a TypeScript file named foo.ts that contains an exported class called "Foo" export default class Foo{ } I am attempting to import this class into another file within the same directory import {Foo} from './foo'; However, I am encounter ...

The input field cannot be accessed via touch on mobile devices

<div class="form-group row pswrd" style="padding: 0px 10px"> <div id="email" class="col-md-12 col-xs-12"> <input type="password" class="form-control c_fname" id="c" #pswd name="password" placeholder="password" [(ngModel)]="user.passwor ...

Finding the location of a file within a published web component

I am currently working on a webcomponent where I need to include a link tag in the head section and set the href attribute to a folder within a node module. At this stage, during the development of my component, my project structure looks like this: http ...

Testing Angular 2 components with material icons and images

Recently, I finished creating a unique component that showcases an image, material icons, and a custom directive known as ticker. This directive allows for scrolling text if it exceeds the width of the element. https://i.stack.imgur.com/GpDSr.png My next ...

What is the best way to expose the "nuxtServerInit" action for Nuxt.js when using dynamic modules exclusively?

According to this answer, the code snippet below is taken from the official documentation of vuex-module-decorators // @/store/index.ts import Vuex from 'vuex' const store = new Vuex.Store({ /* Ideally if all your modules are dynamic then ...

Exploring the capabilities of observables in mapping nested dynamic object keys, specifically focusing on manipulating data within angular-calendar events

Perhaps utilizing something like map<T,R> would be a better approach than my current method. I am hoping to receive some advice on how to resolve this issue. Currently, no events are being mapped due to incorrect mapping resulting in an incorrect pat ...

TypeORM does not have the capability to effectively remove a row when there is a ManyToOne or

I'm currently grappling with a problem that has me stumped. I've spent countless hours trying to find a solution, but to no avail. I'm using MS-SQL on Azure. The structure of my entities is as follows: Customer and Visits: OneToMany (Prima ...

Is it possible for me to use ts files just like I use js files in the same manner?

So I recently stumbled upon TypeScript and found it intriguing, especially since I enjoy adding annotations in my code. The only downside is that I would have to change all my .js files to .ts files in order to fully utilize TypeScript's capabilities. ...

Contrasting Angular HttpClient Requests with Spring Boot's RestTemplate Requests

While attempting to access an Actuator Endpoint from an Angular Application, a CORS error is being encountered. To resolve this, CORS allowed origins can be enabled in the application.yaml file of the Spring Boot Application. An interesting observation i ...

What could be causing the HTTP response Array length in Angular to be undefined?

Currently, I am facing an issue while retrieving lobby data from a Spring Boot API to display it in my Angular frontend. After fetching the data and mapping it into an object array, I encountered a problem where the length of the array turned out to be und ...

React's setState is not reflecting the changes made to the reduced array

I am currently working on a custom component that consists of two select lists with buttons to move options from the available list to the selected list. The issue I am facing is that even though the elements are successfully added to the target list, they ...

"Take control of FileUpload in PrimeNG by manually invoking it

Is there a way to customize the file upload process using a separate button instead of the component's default Upload button? If so, how can I achieve this in my code? Here is an example of what I've attempted: <button pButton type="button" ...

Authentication of users using NextJS Dashboard App API

I am currently following this tutorial, but instead of fetching data via a PostgreSQL request, I want to utilize an API. When I call an async function with await, it initially returns undefined and then the user object after receiving a response from the ...

AngularJS UI-Router in hybrid mode fails to recognize routes upon initial page load or reload

It appears that when using the @ui-router/angular-hybrid, routes registered within an ng2+ module are not being recognized during the initial load or reload. However, these same routes work fine when accessed by directly typing the URL. I have followed th ...

Enhancing the appearance of the Mui v5 AppBar with personalized styles

I am encountering an issue when trying to apply custom styles to the Mui v5 AppBar component in Typescript. import { alpha } from '@mui/material/styles'; export function bgBlur(props: { color: any; blur?: any; opacity?: any; imgUrl?: any; }) { ...