How to configure API Gateway Client in your angular project?
1 Like
- Download the API Gateway Client by cloning the git repository and taking a pull from the dev branch and after cloning run command npm run build
Repo Link: Sign in · GitLab
- It will consist of two files:-
a) apiGateway.js
b) sw.js
- Copy both folder into your src directory of your angular project.
- Give entry of both files in angular.json file.
a) Inlcude apiGateway.js in scripts array.
b) Include sw.js file in assets array.
"scripts" : [
"src/apiGateway.js"
]
"assets" : [
"src/sw.js"
]
-
Well you have done to integration parts. Let’s see how we can use apiGateway.js API.
-
create a variable that will refer to the API gateway.
In the Typescript file use like this:-
import { Injectable } from '@angular/core' ;
import { from } from 'rxjs' ;
import * as environment from '../environments/environment' ;
@Injectable({
providedIn: 'root'
})
declare const APIGateway: any;
export class APIService{
private apiGateway: any;
constructor() {
// creating the instance of variable
this .apiGateway = new APIGateway();
this .apiGateway.config( this .getConfiguration());
}
// Call API Gateway API for ServiceName based
private callService(body, headers) {
// doPost return the Promise and filtered response
return from( this .apiGateway.doPost(environment, body, headers));
}
// Call API Gateway API for rest based api
private callThroughDynamicRouter(body, headers, url) {
// doPostByUrl return the Promise and filtered response
return from( this .apiGateway.doPostByUrl(environment, body, headers, url));
}
private getConfiguration() {
return {
logging: true , // Enable Logging in API GATEWAY
serviceWorker: true , // Enable Service Worker
activeSWOnLocalHost: true , // Enable Service Worker on LocalHost
encryption: true , // Enable Encryption
storage: "localStorage" , // Can Configure Storage according to your project,a) sessionStorage b) localStorage c) IndexDB
networkDriver: "FETCH"
};
}
}
Now in Component file call above methods:
Import APIService form ‘…/gateway.service
class AppHeaderComponent
{
constructor(private service:APIService)
{
this.service.callService(body,headers).subscribe(result=>
{
// Handle Result
},(err)=>
{
// Handle Error
});
this.service.callThroughDynamicRouter(body,headers,url).subscribe(result=>
{
// Handle Result
},(err)=>
{
// Handle Error
});
}
}
1 Like