GRPC web client with angular 6

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.

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: