Angular2 not working with basic javascript library

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).

Continue reading...