将nbind与Angular 5和TypeScript一起使用

时间:2018-02-06 19:14:17

标签: node.js angular

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

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)=&gt;“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找到。

3 个答案:

答案 0 :(得分:4)

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

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

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

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

您尝试这样做:

enter image description here

你想这样做:

答案 1 :(得分:1)

问题是你在角应用程序中导入nbind,而nbind需要node或python来运行nbind。

您应该在您的节点(服务器端)应用程序中导入,而不是在角度(客户端应用程序)上导入。

答案 2 :(得分:0)

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