将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 服务器。

你尝试这样做：

你想要这样做：