@ngflix/feign

Feign makes writing http clients easier

Feign is an Angular 5+ package for creating services that can be used to call backend parties, it's based on HttpClientModule provided by angular. Feign's first goal was reducing boilerplate.

Installation

Install @ngflix/feign from npm: npm install @ngflix/feign --save

How does Feign work?

Create a service class and add some annotatons

// posts-feign.service.ts
import { FeignClient, RequestMapping, RequestBody, PathVariable } from '@ngflix/feign';
import { Observable } from 'rxjs';

@FeignClient({
  path: 'https://jsonplaceholder.typicode.com',
  name: 'postService'
})
export class PostService {
  @RequestMapping({ method: 'GET', value: 'posts' })
  public getAll(@RequestParam('order') order: 'desc' | 'asc', @RequestParam('date') date: Date): Observable<Post[]> {
    return null;
  }

  @RequestMapping({ method: 'POST', value: 'posts' })
  public createOne(@RequestBody post: Post): Observable<Post> {
    return null;
  }

  @RequestMapping({ method: 'GET', value: 'posts/{id}' })
  public getOne(@PathVariable('id') postId: string): Observable<Post> {
    return null;
  }
}

...

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  posts$: Observable<Posts[]>;

  constructor(private service: PostService) {
    this.posts$ = service.getAll('desc', new Date());
  }
}

To register the module within your application:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PostService } from './posts-feign.service';
import { NgFeignModule } from '@ngflix/feign';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgFeignModule.forRoot()],
  providers: [PostService],
  bootstrap: [AppComponent]
})
export class AppModule {}

decorators:

@FeignClient

add meta data to service shuch as name, path, and interceptor

@RequestBody

The @RequestBody annotation indicates a paramer that should be used in the body of the request.

@Headers

Feign supports settings headers on requests either as part of the api or as part of the client depending on the use case.

@PathVariable

Replace a dynamic variable on the path by the parameter annotated.