12

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.

Asad Shah
  • 771
  • 2
  • 8
  • 22

5 Answers5

10

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.
Asad Shah
  • 771
  • 2
  • 8
  • 22
  • 1
    Repo link not working, Can you please update that? thanks – Synster Sep 01 '20 at 09:02
  • 1
    @Synster I think this might do it. This is the official example for typescript on the grpc-web githug page: https://github.com/grpc/grpc-web/blob/master/net/grpc/gateway/examples/echo/ts-example/client.ts – toderik Jan 12 '21 at 06:43
  • I have a question, when I get response from grpc server, then how can I subscribe data? – Ahmer Ali Ahsan Jul 07 '21 at 19:22
5

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

Kim T
  • 5,770
  • 1
  • 52
  • 79
  • 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",` – Alex Punnen Aug 26 '22 at 14:26
1

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

Wenbo Zhu
  • 21
  • 1
1

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

Tomáš Moskala
  • 31
  • 2
0

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

  1. 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"

    }

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

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

Farshad Bayat
  • 77
  • 7