Protoc-gen-ng NPM

protoc-gen-ng

gRPC Angular code generator based on grpc-web.

Work in progress: breaking changes possible.

Features

two-way binding thanks to properties instead of Java-like setters / getters
client services are bound to dependency injection
rxjs first-class support
typescript first-class support
JSDoc comments incl. @deprecated option for properties and rpc / methods. Example
easy to install and update thanks to npm package

Installation

Installation consists of two parts

Globally

Step 1. Install the plugin

npm i -g protoc-gen-ng

Step 2. Install protoc if you have none yet: guide.

In your Angular project

Install runtime dependencies:

npm i -S google-protobuf grpc-web
npm i -D @types/google-protobuf

google-protobuf is required to encode / decode messages
grpc-web implements the transport

Configure your backend

Due to the browsers' limitations you would need to configure a special proxy in order to access your gRPC services.

Please configure your proxy according to grpc-web docs.

Usage

Generate code

Add to your package.json the following script:

  "scripts": {
    ...
    "proto:generate": "protoc --plugin=protoc-gen-grpc_ng --ng_out=<OUTPUT_PATH> -I <PROTO_DIR_PATH> <PROTO_FILES>"
    ...
  }

Modify it as follows:

OUTPUT_PATH - the path your code will be generated
PROTO_DIR_PATH - the root path of your proto files
PROTO_FILES - list of proto files to use

Example:

  "scripts": {
    ...
    "proto:generate": "protoc --plugin=protoc-gen-grpc_ng --ng_out=./src/proto -I ../proto ../proto/*"
    ...
  }

Configure the clients

Every service has an injected configuration. You can create those services manually or use them as native Angular services.

To use them as Angular services, provide the configuration in your AppModule.

E.g. for a service TestServiceClient you need to provide the GRPC_TEST_SERVICE_CLIENT_SETTINGS:

@NgModule({
  // ...
  providers: [
    // ...
    // the name of the token can be found in corresponding service constructor
    { provide: GRPC_TEST_SERVICE_CLIENT_SETTINGS, useValue: { host: 'http://localhost:8080' } },
    // or use value from environment.ts
    // { provide: GRPC_TEST_SERVICE_CLIENT_SETTINGS, useValue: { host: environment.host } },
    // ...
  ],
  // ...
})
export class AppModule {
}