Angular2 not working with basic javascript library

Question

There seems to be an error in angular2-polyfills.js when getting a Javascript library (with its related Typescript typings) working in Angular 2 in the Browser.

It's a weird problem: I seem to be able to build and run when there is only 1 line of code from the library, but when I enter a 2nd line, it builds, but doesn't run?!?.

The library is AutobahnJS. It's a single .js file and the exact same library is designed to work in both the Browser and Node. It works perfectly in both the Browser and Node as a normal (non-angular2) javascript library. I have it working in Node using Typescript and it's related Typings (There is an example test at the Definitely Typed github page)

I have followed the basic Angular 2 Quickstart for Typescript and got it working no problems.

HERE is the code and output which DOES work. Note the last line in testAutobahn() is commented out:

import {Component} from 'angular2/core';
import autobahn = require('autobahn');

@Component({
    selector: 'my-app',
    template: `
        <h1>Project: {{_projectName}}</h1>
    `
})
export class AppComponent {

    constructor() {}

    private _projectName : string = "EXAMPLE7";

    testAutobahn() {
        var options: autobahn.IConnectionOptions =
         { url: 'wss://demo.crossbar.io/ws', realm: 'realm1' };

        //var connection = new autobahn.Connection(options);    //  <- THIS line commented out, app runs fine
    }
}

HERE is the code and output which does NOT work. Note the last line in testAutobahn() is left in:

import {Component} from 'angular2/core';
import autobahn = require('autobahn');

@Component({
    selector: 'my-app',
    template: `
        <h1>Project: {{_projectName}}</h1>
    `
})
export class AppComponent {

    constructor() {}

    private _projectName : string = "EXAMPLE7";

    testAutobahn() {
        var options: autobahn.IConnectionOptions =
         { url: 'wss://demo.crossbar.io/ws', realm: 'realm1' };

        var connection = new autobahn.Connection(options);    //  <- THIS line left in, app not run!
    }
}

The only difference is the commenting/uncommenting of that line. The error seems to come from angular2-polyfills.js and system.src.js

I have used 'tsd' to install all the typings. They all look correct and my editor Atom has intellisense on the autobahn.* types just fine.

Possible issues?:

1. Using AutobahnJS v0.9.9 but the Typings seem to be for v0.9.6

   -> I can't see this being a real problem
   

2. When building, Typescript emits the Javascript code, but it does give an error:

"Subsequent variable declarations must have the same type. Variable '$' must be of type 'cssSelectorHelper', but here has type 'JQueryStatic'."

        -> I have resolved this error by simply commenting out the line   /* declare var $: JQueryStatic; */   in the jquery.d.ts file (I'm not using JQuery anyway) 

Using Typescript v1.7.5, Angular 2 Beta 0 with the package.json, tsconfig.json and boot.ts files as per the Angular 2 Quickstart for Typescript. My end goal is to get an Angular2 Service working with AutobahnJS (but just at the baby steps at the moment).

Any help would be greatly appreciated....

Answer 1

Well I have eventually got this working now and made some progress towards an AutobahnJS and Angular 2 Service. You may refer to my plunker:

[plunker](https://plnkr.co/edit/Dgipr76Rbhgh31PH4pmM)

however I'm still quite stuck. The problem is I can't simply 'call' a function (where this function will then go-ahead and execute the Autobahn session.call(...) method) which returns a value. For example, I'm wanting to do something simple like:

var x = myMessageService.DoFunct1( someParameter );