Using a browserified JS library with Angular 2

Update (fix it, this time for real)

There is a very good reason why it doesn't work in your code: because I lied to you. So here is my real cheat in case you didn't "diffed" it yourself yet.

I still need to require libquassel 2 times but the first time is done not by the call to require which is useless but by adding it to angular-cli.json to the scripts section:

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

This is important because "client/libquassel.js" declares its own require but do not explicitly exports it so if you do

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

libquassel's custom require is left stuck inside anonymous namespace and you can't access it. Adding it to the scripts section on the other hand, lets libquassel.js to pollute the global namespace (i.e. window) with its require and thus make it work.

So the actual steps to make it work are:

1. Add client/libquassel.js to the scripts section of angular-cli.json
2. Use additional require to actually load Quassel module

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

Here is my attempt. It looks like you need to require "quassel" 2 times: first time to load the JS from "../node_modules/libquassel/client/libquassel.js" and second time to let the overridden require from that JS actually resolve "quassel". Here is a trick that seems to work for me in '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(...);

I needed one more trick to not fail with a compilation error: particularly I had to use window['require'] instead of just require for the second call as it is a call for the inner require as defined inside client/libquassel.js and Node/Angular-cli alone can't handle it.

Note that after that setup my application still failed with a runtime error in some AJAX because browsified libquassel.js seem to require a proxy set up on the server-side at URL like /api/vm/net/connect and this is probably what server-side of the net-browsify should do but I didn't try to set it up.

Answer to comments

It looks like you use old version of Angular-CLI and if you upgrade everything should work fine.

Here is what ng --version tells me on my original machine

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

When I tried to copy my original project to a different machine I also got a compilation error about require but when I updated Angular-CLI to

@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

it compiled and worked the same. What I did is just followed the instruction

The package "angular-cli" has been deprecated and renamed to "@angular/cli".

Please take the following steps to avoid issues:
"npm uninstall --save-dev angular-cli"
"npm install --save-dev @angular/cli@latest"

and then updated angular-cli.json following the instructions by ng serve