将nbind与Angular 5和TypeScript一起使用

Question

我正在尝试使用nbind在Angular网站中轻松创建C ++ NodeJS模块。 我在Webstorm中创建了一个新的Angular CLI项目，并按照https://github.com/charto/nbind上的教程进行操作。 一切都在构建，我的lib-types.dt文件正在生成：

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;
}

我在我的AppComponent中导入库，如下所示：

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');
  }
}

我添加了一个带（click）=>“sayHello（）”的按钮，它应该调用库。 运行应用程序时，我收到多个警告（依赖项的请求是一个表达式）：

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

此外，当我单击按钮时，我收到以下错误：

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)

这是nbind中的错误，还是我以错误的方式导入我的库？

当前代码可以在https://github.com/kayvanbree/angular-nbind-boilerplate找到。

Answer 1

Angular是一个前端框架。 从您的角度部分，您可以调用Web服务，但不能直接在前端部分使用C ++。

您需要使用nodeJS配置一个后端部分。

您可以使用nbind在NodeJS部分中使用C ++部分。 （ https://github.com/charto/nbind#using-nbind-headers ）

之后，您可以从Angular部分调用NodeJS服务器。

你试着这样做：

你想这样做：

Answer 2

问题是您在角应用程序中导入nbind，而nbind需要节点或python来运行nbind。

您应该在节点（服务器端）应用程序中导入，而不是在角度（客户端应用程序）上导入。

Answer 3

这里的答案是不正确的。 如果您构建目标asm.js，那么使用nbind编译的代码不需要在节点中运行并且可以在浏览器中运行： https ： //github.com/charto/nbind#using-in-web-browsers