Grpc-web: Using grpc-web-client with Angular (angular-cli)

[slavede]

Whenever I tried to serve/build project I get:

ERROR in ./node_modules/grpc-web-client/dist/transports/nodeHttp.js
Module not found: Error: Can't resolve 'http' in '\node_modules\grpc-web-client\dist\transports'
ERROR in ./node_modules/grpc-web-client/dist/transports/nodeHttp.js
Module not found: Error: Can't resolve 'https' in '\node_modules\grpc-web-client\dist\transports'

Anyone encountered it ever?

It seems that require('http') from nodeHttp.js can't hit NodeJS's http...

[Drogglbecher]

I have the same problem since updated to Angular 6. Could be a problem with the HttpModule deprecation but not sure at all atm.

[MHDante]

Yep. Same problem on Angular 6. I had to vendor in a version that commented out the http transport

[tianzhou]

Same problem here as well after upgrading to Angular 6

[dirkluijk]

Any workaround for this?

[nekrondev]

Dear all,

I've got another problem besides the nodeHttp.js missing issue and kindly ask for your help.

I generated sample typescript code for my ng6 project located at "./src/app/generated/*". Now when I try to build or serve the project I get the following error:

ERROR in ./src/app/generated/proto/sweeguiapi_pb_service.js
Module not found: Error: Can't resolve '../proto/sweeguiapi_pb' in 'C:\src\go\src\swee_restart\sweefrontend\src\app\generated\proto'

I also imported the stubs from a service that is located at "./src/app":

import { GuiApiService } from './generated/proto/sweeguiapi_pb_service';
import { GetClusterReq, GetClusterRes, STATE } from './generated/proto/sweeguiapi_pb';

which gives me:

ERROR in ./src/app/monitor.service.ts
Module not found: Error: Can't resolve './generated/proto/sweeguiapi_pb' in 'C:\src\go\src\swee_restart\sweefrontend\src\app'

VSCode however does not show any missing modules and IDE works as expected.

Whats wrong with my setup?

I am using the following deps:

"dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/cdk": "^6.0.1",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/material": "^6.0.1",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "@types/google-protobuf": "^3.2.7",
    "angular-in-memory-web-api": "^0.6.0",
    "core-js": "^2.5.4",
    "google-protobuf": "^3.5.0",
    "grpc-web-client": "^0.6.2",
    "hammerjs": "^2.0.8",
    "npm": "^6.0.0",
    "rxjs": "^6.0.0",
    "ts-protoc-gen": "^0.6.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.0",
    "@angular-devkit/build-angular": "~0.6.0",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }

Thanks for your help!

[MHDante]

@MarcusLongmuir This change seems related to this post: https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814

What google is saying is that the browser version of grpc-web should not rely on node libraries

[MHDante]

To anyone still fighting with this, here's a workaround. (For frontend only)

In your tsconfig.json, add:

{
"compilerOptions": {
    "paths": {
      "https": [ "app/patch.js" ],
      "http": [ "app/patch.js" ],
    }
}

and in your app folder, create a new file patch.js with the following content:

//https://github.com/improbable-eng/grpc-web/issues/191

[nekrondev]

@MHDante: Workaround works as expected.

Meanwhile I found out what my problem was. I used the protoc command from the examples and generated the js_out into a different directory (binary) so that type definition and js file where located in two different places making it unable to resolve by ng build.

Well, it must be the 30 degrees Celsius over here in Germany that toasted my brain.

[NiNJAD3vel0per]

I had to change like this: (from "app/patch.js" to "./src/app.patch.ts") @MHDante
I am using Angular6.0.9.

"paths": {
"https": [ "./src/app/patch.ts" ],
"http": [ "./src/app/patch.ts" ],
}

I hope to be fixed this issue as soon as possible

[MHDante]

The exact path to patch.ts is dependent on how you've set up your project.

[Diemauerdk]

I have this problem too, really hope for a solution soon :(

[fengyue]

The "compilerOptions" workaround doesn't work. @MHDante any ideas?

My config is
"paths": {
"https": [ "./src/app/patch.ts" ],
"http": [ "./src/app/patch.ts" ],
}

[johanbrandhorst]

Would this be fixed by #204? Sounds like we could hit 2 birds with one stone.

[kmturley]

I'm working on another Angular gRPC example project here:
https://github.com/kmturley/angular-nest-grpc