TypeScriptClientGenerator Angular

Sample

• Client class name: DataClient
• TypeScript file name: serviceClients.ts

Additional settings

Angular template only:

• BaseUrlTokenName
• HttpClass: Http | HttpClient
• RxJsVersion: (use 6.0 for Angular 6+)
• UseSingletonProvider: (Angular 6+ only)
• InjectionTokenType

First create an NgModule with the generated services:

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { SampleDataService } from './services';

@NgModule({
    imports: [
        HttpModule
    ],
    providers: [
        SampleDataService
    ]
})
export class ServicesModule {
}

Usage in an Angular component via dependency injection:

import { Component } from '@angular/core';
import { SampleDataService, WeatherForecast } from '../../services';

@Component({
    selector: 'fetchdata',
    templateUrl: './fetchdata.component.html'
})
export class FetchDataComponent {
    public forecasts: WeatherForecast[];

    constructor(sampleDataService: SampleDataService) {
        sampleDataService.weatherForecasts().subscribe(result => {
            this.forecasts = result;
        });
    }
}

Extension code which is needed when UseTransformOptionsMethod or UseTransformResultMethod is enabled is shown below.

HttpClass: Http

import { Observable } from 'rxjs/Observable'; // ignore
import { Response, RequestOptionsArgs } from '@angular/http'; // ignore

export class MyBaseClass {
    protected transformOptions(options: RequestOptionsArgs) {
        return Promise.resolve(options);
    }

    protected transformResult(url: string, response: Response, processor: (response: Response) => any): Observable<any> {
        return processor(response);
    }
}

HttpClass: HttpClient

export class ServiceBase {
    protected transformOptions(options: any) {
        return Promise.resolve(options);
    }

    protected transformResult(url: string, response: HttpResponse<Blob>, processor: (response: HttpResponse<Blob>) => any): Observable<any> {
        return processor(response);
    }
}

Sample project

Extending generated clients via Interceptor class

Following example of interceptor extends generated HTTP clients adding JWT token to all generated HTTP calls.

Client should be generated with HttpClient option (Library @angular/common/http)

Interceptor example below:

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';

import { OidcSecurityService } from 'angular-auth-oidc-client';
import { Observable } from 'rxjs';

@Injectable()
export class TokenInterceptor {

/**
 * Creates an instance of TokenInterceptor.
 * @param {OidcSecurityService} auth
 * @memberof TokenInterceptor
 */
constructor(public auth: OidcSecurityService) {}

/**
 * Intercept all HTTP request to add JWT token to Headers
 * @param {HttpRequest<any>} request
 * @param {HttpHandler} next
 * @returns {Observable<HttpEvent<any>>}
 * @memberof TokenInterceptor
 */
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
       setHeaders: {
           Authorization: `Bearer ${this.auth.getToken()}`
       }
    });

    return next.handle(request);
  }
}

Update providers sections in app.module like:

 providers: [
    HttpClientModule,
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
  ],