[Node.js] Does the Node implementation with Angular2?

[ch...@itsolut.com]

Does gRPC work with Angular2?  I've installed the latest of the frameworks today (Angular 2 (4.0), latest Node.js, latest npm, 1.2 gRPC).  I'm running on Windows 10.  

I have the example for gRPC working (dynamic_codegen).  And I've got gRPC working with a java server / client.  Next step is to get a browser client and am going to use Angular2 as the client stack.

When I try to adapt it to an Angular2 service, I get several errors.  The first is:

>ng serve
** NG Live Development Server is running on http://localhost:4200 **
Hash: 08c088c092b672d8d109
Time: 13545ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 9.45 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.84 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]


WARNING in ./~/grpc/src/node/src/grpc_extension.js
38:14-35 Critical dependency: the request of a dependency is an expression


ERROR in ./~/grpc/src/node/src/grpc_extension.js
Module not found: Error: Can't resolve 'node-pre-gyp/lib/pre-binding' in 'C:\Users\chane\Documents\workspace\client-angular\node_modules\grpc\src\node\src'
 @ ./~/grpc/src/node/src/grpc_extension.js 34:13-52
 @ ./~/grpc/src/node/index.js
 @ ./src/app/home/home.service.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

When I look in the node_modules/grpc, the node-pre-gyp package is there.  Just not being utilized.  Thoughts on how to fix - or let me now if this shouldn't work.

The service I'm implementing (HomeService.ts)

import * as grpc from 'grpc';

import { Injectable } from '@angular/core';


@Injectable()
export class HomeService {

 constructor() {}

 private hello_proto = grpc.load('./helloworld.proto');
 private client = new this.hello_proto.Greeter('localhost:50051', grpc.credentials.createInsecure());

 greet(user: String): void {
 this.client.sayHello({name: 'Test!!!'}).forEach(response => {
 console.log('Greeting:', response.message);
 });
 }
}

The helloworld.proto

syntax = "proto3";

option java_multiple_files = true;
option java_package = "com.sample";
option java_outer_classname = "HelloWorldProto";
option objc_class_prefix = "HLW";

package helloworld;

service Greeter {
 rpc SayHello (HelloRequest) returns (HelloReply) {}
}

message HelloRequest {
 string name = 1;
}

message HelloReply {
 string message = 1;
}

And the package.json

{
 "name": "client-angular",
 "version": "0.0.0",
 "license": "MIT",
 "scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e"
 },
 "private": true,
 "dependencies": {
 "@angular/common": ">=4.0.0-beta <5.0.0",
 "@angular/compiler": ">=4.0.0-beta <5.0.0",
 "@angular/core": ">=4.0.0-beta <5.0.0",
 "@angular/forms": ">=4.0.0-beta <5.0.0",
 "@angular/http": ">=4.0.0-beta <5.0.0",
 "@angular/platform-browser": ">=4.0.0-beta <5.0.0",
 "@angular/platform-browser-dynamic": ">=4.0.0-beta <5.0.0",
 "@angular/router": ">=4.0.0-beta <5.0.0",
 "core-js": "^2.4.1",
 "rxjs": "^5.1.0",
 "zone.js": "^0.7.6",
 "async": "^1.5.2",
 "google-protobuf": "^3.0.0",
 "grpc": "^1.0.0",
 "lodash": "^4.6.1",
 "minimist": "^1.2.0"
 },
 "devDependencies": {
 "@angular/cli": "1.0.0-rc.4",
 "@angular/compiler-cli": ">=4.0.0-beta <5.0.0",
 "@types/jasmine": "2.5.38",
 "@types/node": "~6.0.60",
 "codelyzer": "~2.0.0",
 "jasmine-core": "~2.5.2",
 "jasmine-spec-reporter": "~3.2.0",
 "karma": "~1.4.1",
 "karma-chrome-launcher": "~2.0.0",
 "karma-cli": "~1.0.1",
 "karma-jasmine": "~1.1.0",
 "karma-jasmine-html-reporter": "^0.2.2",
 "karma-coverage-istanbul-reporter": "^0.2.0",
 "protractor": "~5.1.0",
 "ts-node": "~2.0.0",
 "tslint": "~4.5.0",
 "typescript": "~2.1.0"
 }
}

Apologize if this is the wrong forum.  My background is java backend services and am learning the front end and thought I'd start with the newest frameworks.  Would like to use gRPC if it's possible with Angular2.

Thanks,
Chris....

[Michael Lumish]

The Node.js gRPC library is a server-side library, written primarily in C and compiled against the Node.js runtime. It does not work in a browser environment. There is ongoing development on a gRPC library that works in the browser, but it has not yet been released.

--
You received this message because you are subscribed to the Google Groups "grpc.io" group.
To unsubscribe from this group and stop receiving emails from it, send an email to grpc-io+u...@googlegroups.com.
To post to this group, send email to grp...@googlegroups.com.
Visit this group at https://groups.google.com/group/grpc-io.
To view this discussion on the web visit https://groups.google.com/d/msgid/grpc-io/0194a9d8-327c-413d-8f52-c74045fed263%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[ch...@itsolut.com]

Thanks. That makes sense.

Is the browser work happening in the public git tree and something people can look at / work with?

Chris....

[ch...@itsolut.com]

was able to answer my own question with a bit of digging.  For others, checkout: https://github.com/grpc/grpc/issues/8682

[Carl Mastrangelo]

I think you *can* hack a browser to make gRPC requests using the same wireformat.  Code gen is probably pretty far out of scope though, given how varied the ways of building JS applications is currently.