Having experience with grpc using a .net client and a Java grpc server, how can I integrate a grpc web client on Angular 6 using TypeScript? Additionally, what is the process for creating proto files and their typings for TypeScript?
I have been referencing this repository but am encountering difficulties in generating the proto files.
After some time of experimentation, I successfully generated proto files for TypeScript by following these steps:
npm install google-protobuf @types/google-protobuf grpc-web-client ts-protoc-gen --saveprotoc --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.protoIf you want to make it function properly, you can execute the following command:
npm install google-protobuf protoc ts-protoc-gen
After that, include a compilation script in your package.json file:
"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 convert the .proto files into a Service by running:
npm run compile
To see this method in action, check out this link:
Check out the grpc/grpc-web project on GitHub at https://github.com/grpc/grpc-web
Unable to run on Windows OS
"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",
Error message '`.` is not recognized as an internal or external command'
This alternative solution works: 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"
}
To compile, use the command: npm run compile
For Windows users looking for a solution with automation:
Alternatively, you can use this single command for steps 1 to 4: npm i @types/google-protobuf google-protobuf grpc-web-client ts-protoc-gen --save
Add the following line to your package.json file:
"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"
}
Generate the TypeScript file using this command npm run grpc:gen
The code can be found at the following repositories: Server for .NET Core Client for Angular
I am encountering an issue with my directory structure as follows : src |- server |- myServer.ts |- views |- myView.hbs dist |- server |- myServer.js The problem lies in the fact that the dist folder does not have a views subfolder, where the J ...
Looking to create a simple animation with the angular animation package The goal is to smoothly transition from opacity 0 to opacity 1 for a fade effect. I've had success with other properties like height and display, but struggling with opacity. H ...
I'm currently working on a ReactJS/TypeScript project on Windows 10. I've been running into issues when trying to build my TypeScript scripts using the following command: "rimraf ../wwwroot/* && react-scripts-ts build && copyfi ...
I need some clarification. The Angular app I'm working on is successfully populating data to the view, but when navigating from one component to another, the ngOnInit lifecycle hook doesn't seem to be invoked, leaving the list on the view empty. ...
In my grid view, I have a checkbox in the last column. I am trying to ensure that only one row can be selected at a time. <tr *ngFor="let permit of PermitDetails" (click)="GoByClick(permit)"> <td style="text-align: center">{{permit.TVA_BAT ...
I am currently working with a mat-table and I'm looking to retrieve the ViewContainerRef of a clicked row in order to add another component within that specific row. Can anyone suggest the most effective method to obtain the ViewContainerRef of a row? ...
I'm currently working on a share module setup that is structured as follows: @NgModule({ exports: [ CommonModule, HttpModule, OneModule, TwoModule ] }) export class SharedModule { } The OneModule imports the SharedModule in order ...
The Issue at Hand I have developed an angular application that functions flawlessly on the development server. This application utilizes localStorage to store the user's JWT token, although I am aware that this may not be the most secure method. How ...
Here is a function that I need to create a validator for: function (n: number) { return {s: n}; } I have come across two options for creating the validator: Option 1: Interface interface ValidatorFnInterface { (n: number): { [key: strin ...
Currently, I am in the process of developing an Electron application and I have decided to implement TypeScript for this project. While TypeScript essentially boils down to JavaScript in the end, my familiarity with it makes the transition seamless. As of ...
VS Code has been automatically importing everything using Node-like non-relative paths relative to baseUrl, which is not the desired behavior. Is there a way to instruct VS Code to import everything with relative paths, excluding Node modules? Removing t ...
I am a beginner with Docker and I'm experimenting with running the default Angular app locally on a Docker container. After creating the app using ng new, I included the following Dockerfile: FROM node:8 RUN mkdir /usr/src/app WORKDIR /usr/src/app C ...
I have a forkjoin set up to check for the presence of a person in two different data stores. If the person is not found in either store, I want to perform a delete action which should return true if successful, and false otherwise. However, my current impl ...
I am encountering some difficulties while attempting to import the cors module in a TypeScript project using Express. When I use the following code: import cors from "cors"; I receive the following error message: "Cannot find module &apos ...
Although I am still fairly new to Vue, I have a strong background in Typescript and Angular. Currently, I am embracing Typescript and utilizing the vue-class-component and vue-property-decorator libraries following the recommendations in the Vue documentat ...
One of my components has nested ngFor directives looping through an array of users and their posts. I have a view link within this element, and when clicked, it should show detailed information about both the user and the post. However, the current setup i ...
When utilizing a date pipe in Angular with a German localized weekday, an automatic addition of a dot/full stop can be observed behind the weekday. <span>{{ day | date:'EE'}}</span> The desired output: Mo, Di, Mi However, the curr ...
I am encountering an error while running my NodeJs App. sudo /usr/local/bin/node app.js Error: Failed to load gRPC binary module due to it not being installed for the current system Expected directory: node-v57-linux-x64-glibc Found: [node-v ...
Incorporating a certain library automatically includes uncaughtException and unhandledRejection listeners, which I want to remove. Here's the code snippet: ["unhandledRejection", "uncaughtException"].forEach((eventName) => process .listener ...
How can I create a function that takes a configuration object and returns a processed version with the same keys but different values? This function should: Offer suggestions for the properties of the configuration object when calling the function. Infor ...