javascript - 在Angular 2中使用浏览器化的JS库

我想在Angular 2项目中使用libquassel(https://github.com/magne4000/node-libquassel)。该库是浏览器化的，因此从理论上讲应该可以使用，但是我不确定如何将其导入我的项目中。

我尝试添加到我的typings.d.ts

declare module 'libquassel';

然后用导入

import * as Quassel from 'libquassel';

但我明白了

EXCEPTION: net.Socket is not a function

当我尝试运行我的代码时，我相信这是另一个在client/libquassel.js文件中嵌入浏览器的库。

如何使用该库？

编辑:我将在这里回答所有问题:

我的设置是一个普通的angular-cli项目。没有花哨的东西，只有ng new proj1然后是npm install libquassel --save。

我的index.html中没有ng new没有放置的其他内容。

我尝试使用import * as Quassel from 'libquassel'和var Quassel = require('quassel')(及其排列)导入库，但是没有任何运气(错误从unknown function 'require'到can't find module lib|quassel)。

复制我的项目的步骤:

ng new test
cd test
npm install libquassel --save
ng g s quassel

然后将QuasselService添加到providers中的app.module.ts数组中。
这将很好地演示我的问题，即如何在libquassel中导入QuasselService。

最佳答案

更新(修复，这次是真实的)

有一个很好的原因为什么它在您的代码中不起作用:因为我对您撒谎。因此，这是我真正的作弊手段，以防您自己尚未“与众不同”。

我仍然需要2次require libquassel，但第一次不是通过调用require来完成的，它没有用，而是将其添加到angular-cli.json的scripts部分中:

  "scripts": [
    "../node_modules/libquassel/client/libquassel.js"
  ],

这很重要，因为“client / libquassel.js”声明了自己的require，但未明确导出它，因此如果您这样做

require('libquassel/client/libquassel.js');

libquassel的自定义require保留在匿名 namespace 中，您无法访问它。另一方面，将其添加到scripts部分，使libquassel.js可以使用其window污染全局 namespace (即require)，从而使其工作。

因此，使其工作的实际步骤是:

将client / libquassel.js添加到section的脚本angular-cli.json

使用其他require实际加​​载Quassel模块

let Quassel = window['require']('quassel'); // note that usingg require('quassel') leads to compilation error
let quasselObj = new Quassel(...);

这是我的尝试。看来您需要2次require“quassel”:第一次从“../node_modules/libquassel/client/libquassel.js”加载JS，第二次让该JS中覆盖的require实际上解析“quassel” 。这是一个似乎在'main.ts'中对我有用的技巧:

require('../node_modules/libquassel/client/libquassel.js');
let Quassel = window['require']('quassel'); // note that using require('quassel') leads to compilation error
let quasselObj = new Quassel(...);

为了避免编译错误，我还需要其他技巧:特别是我不得不使用window['require']而不是require来进行第二次调用，因为这是对内部require的调用，仅在client/libquassel.js中定义，而Node / Angular-cli本身不能处理它。

请注意，在该设置之后，我的应用程序仍然会因某些AJAX中的运行时错误而失败，因为浏览化的libquassel.js似乎需要在服务器端的URL上设置一个代理，例如/api/vm/net/connect，这可能是net-browsify的服务器端应该做的，但是我没有尝试设置它。

对评论的回答

看来您使用的是Angular-CLI的旧版本，并且如果升级，一切都可以正常工作。

这是ng --version在我的原始机器上告诉我的

angular-cli: 1.0.0-beta.28.3
node: 6.10.0
os: win32 x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/compiler-cli: 2.4.10

当我尝试将原始项目复制到另一台计算机上时，我也收到有关require的编译错误，但是当我将Angular-CLI更新为

@angular/cli: 1.0.0
node: 6.10.0
os: darwin x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/cli: 1.0.0
@angular/compiler-cli: 2.4.10

它编译和工作相同。我所做的只是按照指示进行



然后按照angular-cli.json的说明更新ng serve