使用带有Angular 2的浏览器化JS库

Question

我想在我的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文件中的库.

我该如何使用这个库？

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

• 我的设置是一个简单的角度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.

Answer 1

更新(修复它,这次真实)

有一个很好的理由说明它在你的代码中不起作用:因为我欺骗了你.所以这是我真正的作弊,如果你还没有自己"贬低"它.

我仍然需要requirelibquassel 2次,但第一次不是通过require无效的调用完成,而是通过将其添加angular-cli.json到该scripts部分:

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

这很重要,因为"client/libquassel.js"声明了它自己,require但如果你这样做,就不要显式地导出它

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

libquassel的自定义require被卡在匿名命名空间内,你无法访问它.scripts另一方面,将它添加到该部分,让libquassel.js window用它污染全局命名空间(即),require从而使其工作.

所以实现它的实际步骤是:

1. 将client/libquassel.js添加到脚本section中angular-cli.json
2. 使用额外require的实际加载Quassel模块

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

这是我的尝试.看起来你需要require"quassel"2次:第一次从"../node_modules/libquassel/client/libquassel.js"加载JS,第二次让require来自JS 的重写实际上解析"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中因运行时错误而失败,因为browsified 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"包已弃用,并重命名为"@ angular/cli".

请采取以下步骤以避免问题:
"npm uninstall --save-dev angular-cli"
"npm install --save-dev @ angular/cli @ latest"

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