angular - Angular 6 的 GRPC Web 客户端

Question

我使用过 grpc .net 客户端和使用 java 创建的 grpc 服务器，我如何使用 typescript 在 angular 6 上实现 grpc Web 客户端？另外我如何创建原型文件并且它是打字稿的打字？我正在关注这个repo，但无法生成 proto 文件。

Answer 1

花了一些时间后，我能够通过以下步骤为打字稿创建原型文件：

1. 从此链接下载适用于 windows 的 protobuf 。提取文件后为 protoc.exe 设置路径变量
2. 安装 npm 包npm install google-protobuf @types/google-protobuf grpc-web-client ts-protoc-gen --save
3. 安装后使用以下命令生成打字稿文件： 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. 最后像这个repo中提到的那样使用它。

Answer 2

你也可以通过运行来让它工作：

npm install google-protobuf protoc ts-protoc-gen

然后在你的 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",

现在您可以使用以下命令将 .proto 文件编译为服务：

npm run compile

您可以在此处查看该方法：

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

Answer 3

grpc/grpc-web 位于https://github.com/grpc/grpc-web

Answer 4

无法在 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",

我得到'。未被识别为内部或外部命令

这很好用：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 运行编译

Answer 5

在具有自动功能的 Windows 解决方案上：

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

或者对于 1 到 4 可以使用这个命令： npm i @types/google-protobuf google-protobuf grpc-web-client ts-protoc-gen --save

5. 将此行添加到 package.json：

   “脚本”：{

   "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. 使用此命令生成 ts 文件npm run grpc:gen

代码可在此处获得： Server for .net Core Client for angular