Using nbind with Angular 5 and TypeScript

Question

I am trying to use nbind to easily create a C++ NodeJS module in an Angular website. I created a new Angular CLI project in Webstorm and followed the tutorial at https://github.com/charto/nbind. Everything builds and my lib-types.d.t file is being generated:

import { Buffer } from "nbind/dist/shim";

export class NBindBase { free?(): void }

export class Greeter extends NBindBase {
    /** static void sayHello(std::string); */
    static sayHello(p0: string): void;
}

I import the library in my AppComponent like this:

import { Component } from '@angular/core';
import * as nbind from 'nbind';
import * as LibTypes from './../lib-types';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  sayHello() {
    const lib = nbind.init<typeof LibTypes>().lib;
    lib.Greeter.sayHello('aaaaaaaaaaaaaah');
  }
}

I added a button with (click)=>"sayHello()" which should call the library. When running the application I get multiple warnings (the request of a dependency is an expression):

WARNING in ./node_modules/nbind/dist/nbind.js
128:4-32 Critical dependency: the request of a dependency is an expression
    at CommonJsRequireContextDependency.getWarnings (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\dependencies\ContextDependency.js:39:18)
    at Compilation.reportDependencyErrorsAndWarnings (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:703:24)
    at Compilation.finish (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:561:9)
    at applyPluginsParallel.err (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compiler.js:502:17)
    at E:\Projects\streaming\asdf\streampp\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:507:11)
    at processModuleDependencies.err (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./node_modules/nbind/dist/nbind.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

WARNING in ./node_modules/nbind/dist/nbind.js
141:14-42 Critical dependency: the request of a dependency is an expression
    at CommonJsRequireContextDependency.getWarnings (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\dependencies\ContextDependency.js:39:18)
    at Compilation.reportDependencyErrorsAndWarnings (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:703:24)
    at Compilation.finish (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:561:9)
    at applyPluginsParallel.err (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compiler.js:502:17)
    at E:\Projects\streaming\asdf\streampp\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:507:11)
    at processModuleDependencies.err (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./node_modules/nbind/dist/nbind.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

WARNING in ./node_modules/nbind/dist/nbind.js
53:28-53 Critical dependency: the request of a dependency is an expression
    at RequireResolveContextDependency.getWarnings (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\dependencies\ContextDependency.js:39:18)
    at Compilation.reportDependencyErrorsAndWarnings (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:703:24)
    at Compilation.finish (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:561:9)
    at applyPluginsParallel.err (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compiler.js:502:17)
    at E:\Projects\streaming\asdf\streampp\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:507:11)
    at processModuleDependencies.err (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./node_modules/nbind/dist/nbind.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

WARNING in ./node_modules/nbind/dist/nbind.js
72:28-57 Critical dependency: the request of a dependency is an expression
    at RequireResolveContextDependency.getWarnings (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\dependencies\ContextDependency.js:39:18)
    at Compilation.reportDependencyErrorsAndWarnings (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:703:24)
    at Compilation.finish (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:561:9)
    at applyPluginsParallel.err (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compiler.js:502:17)
    at E:\Projects\streaming\asdf\streampp\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:507:11)
    at processModuleDependencies.err (E:\Projects\streaming\asdf\streampp\node_modules\webpack\lib\Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./node_modules/nbind/dist/nbind.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Also when I click the button I get the following error:

ERROR TypeError: Arguments to path.resolve must be strings
    at Object.exports.resolve (index.js:71)
    at findCompiledModule (nbind.js:70)
    at find (nbind.js:93)
    at Object.init (nbind.js:104)
    at AppComponent.sayHello (app.component.ts:14)
    at Object.eval [as handleEvent] (AppComponent.html:1)
    at handleEvent (core.js:13530)
    at callWithDebugContext (core.js:15039)
    at Object.debugHandleEvent [as handleEvent] (core.js:14626)
    at dispatchEvent (core.js:9945)

Is this a bug in nbind, or am I importing my library in the wrong way?

The current code can be found at https://github.com/kayvanbree/angular-nbind-boilerplate.

Answer 1

Angular is a front-end framework. From your angular part you can call a web service but not directly use C++ in your front-end part.

You need to configure one back-end part with nodeJS.

You can use C++ part in your NodeJS part with nbind. (https://github.com/charto/nbind#using-nbind-headers)

After that, you can call NodeJS server from Angular part.

You try to do that :

You want to do that :

Answer 2

The problem is that you are importing nbind at your angular application, and nbind need the node or python to run nbind.

You should import at your node (server side) application, not at your angular (client-side application).

Answer 3

The answers here are not correct. If you build targeting asm.js then code compiled with nbind does not need to be running in node and can run in the browser: https://github.com/charto/nbind#using-in-web-browsers