GRPC web client with angular 6

Question

I have worked with grpc .net client and a grpc server created with java, how can i implement grpc web client on angular 6 with typescript? Also how can i create proto files and it's typing's for typescript? I am following this repo but not able to generate proto files.

Palaeozoology

Here is unofficial angular+grpc framework github.com/ngx-grpc/core – Hawaii

Answer 1

After spending sometime i was able to create proto files for typescript by following steps:

1. Download protobuf for windows from this link. After extracting files set the path variable for protoc.exe
2. install npm packages npm install google-protobuf @types/google-protobuf grpc-web-client ts-protoc-gen --save
3. After installing it generate the typescript files by using the command: protoc --plugin="protoc-gen-ts=absolute-path-to-your-project\node_modules\.bin\protoc-gen-ts.cmd" --js_out="import_style=commonjs,binary:${OUT_DIR}" --ts_out="service=true:${OUT_DIR}" your.proto
4. Finally consume it like as mentioned in this repo.

Palaeozoology

Repo link not working, Can you please update that? thanks – Figurate

@Figurate I think this might do it. This is the official example for typescript on the grpc-web githug page: github.com/grpc/grpc-web/blob/master/net/grpc/gateway/examples/… – Parting

I have a question, when I get response from grpc server, then how can I subscribe data? – Placable

Answer 2

You can also get it to work by running:

npm install google-protobuf protoc ts-protoc-gen

Then add a compile script to your package.json:

"compile": "./node_modules/protoc/protoc/bin/protoc --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts --js_out=import_style=commonjs,binary:src/app/proto-gen --ts_out=service=true:src/app/proto -I ./src/app/proto ./src/app/proto/**/*.proto",

now you can compile the .proto files to a Service using:

npm run compile

You can see the approach working here:

https://github.com/kmturley/angular-nest-grpc

Bolton

Using grp-web from google - ` "compile": "./node_modules/protoc/protoc/bin/protoc --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts --js_out=import_style=commonjs,binary:src/app/proto --grpc-web_out=import_style=typescript,mode=grpcweb:src/app/proto -I ./interfaces/ ./interfaces/**/*.proto",` – Whiteheaded

Answer 3

grpc/grpc-web is available at https://github.com/grpc/grpc-web

Yard

Answer 4

Cannot use on on Windows

"compile": "./node_modules/protoc/protoc/bin/protoc
--plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts --js_out=import_style=commonjs,binary:src/app/proto-gen --ts_out=service=true:src/app/proto -I ./src/app/proto ./src/app/proto/**/*.proto",

I get '.' is not recognized as an internal or external command

This works fine: package.json

"scripts": {
"compile": "node_modules\\protoc\\protoc\\bin\\protoc --plugin=protoc-gen-ts=node_modules\\.bin\\protoc-gen-ts.cmd --js_out=import_style=commonjs,binary:./proto/generated --ts_out=service=grpc-web:./proto/generated -I ./proto ./proto/*.proto"
}

npm run compile

Carrara

Answer 5

On windows Solution with automatic:

1. npm i @types/google-protobuf --save-dev
2. npm i google-protobuf --save
3. npm i grpc-web-client --save
4. npm i ts-protoc-gen --save

Or for 1 to 4 can use this command: npm i @types/google-protobuf google-protobuf grpc-web-client ts-protoc-gen --save

5. Add this line to package.json:

   "scripts": {

   "grpc:gen": "protoc --plugin=protoc-gen-ts=node_modules\\ts-protoc-gen\\bin\\protoc-gen-ts.cmd --js_out=import_style=commonjs,binary:proto\\out --ts_out=service=grpc-web:proto\\out proto\\greet.proto"
   

   }

6. generate ts file with this command npm run grpc:gen

code is available at here: Server for .net Core Client for angular

Confounded