CODEWITHSUNDEEP
angulartypescriptprotobuf.js
Vanu
Vanu

Reputation: 83

Protobuf with Angular 2.0 and asp.net core(webpack) and Typescript

protobuf.js version: "protobufjs": "6.8.8",

i am new to protobufjs and planning to implement the protobufjs in Angular 2 project. I have installed the protobufjs using the "npm install protobufjs --save" inside the Angular 2 project(VS2015).

i have the service below, which sends the http request to Restful service with Content-Type: application/x-protobuf and get the response in protobuf format

getpersondetails(): Observable {
var headers = new Headers();
headers.append('Content-Type', 'application/x-protobuf');
return this.http.get('/system/data/getpersondetails', { headers });
}

Get the sample response as below, ↵*����Alex"(�0�↵&����Du���2355"

how to decode the response to below model object

//PerosnDetails.ts
export class PersonDetails
{
firstname:string;
lastname:string;
salary: number;
}

Can someone help me by providing some samples with descriptive steps for Get request in Angular 2 and typescript.

Any help are really appreciated.

Upvotes: 0

Views: 372

Answers (1)

Timo Stamm
Timo Stamm

Reputation: 750

You want the raw (binary) response, so you have to set the option responseType: "arraybuffer":

http.get('/system/data/getpersondetails', { 
  headers,
  responseType: "arraybuffer"
});

Then you can deserialize your message from the array buffer:

let details = PersonDetails.deserializeBinary(yourArrayBuffer);

But I recommend to use either gRPC-web or Twirp for two reasons:

  1. you can use service declarations in your .proto and can get your clients generated for you
  2. you have some standard for URL mapping and error handling

Also important: There are great alternatives to google-protobuf. For example ts-proto. Or protobuf-ts (this is a shameless plug, I am the author). It has support for Angular.

Upvotes: 2

Related Questions