Issue with Angular 6.x

[egandro]

Hello everybody,

Angular 6.x changed some things. I had to add this to my polyfill.ts.

(window as any).global = window; (window as any).process = window; (window as any).Buffer = window; (window as any).process.browser = true;

Maybe it's of use to somebody here...

[konsultaner]

@egandro I updated all packages of angular to their latest version including autobahn and had to polyfill like this:

(window as any).global = window;
(window as any).process = window;
(window as any).Buffer = window;
(window as any).process.browser = true;
(window as any).process.version = '';
(window as any).process.versions = {node: false};

Thank you for the tip! Helped me a lot

[egandro]

You are welcome :)

ng 6.x is still a bit flacky.

This is not the only issue I have.

[dArignac]

With the fixes of @konsultaner it works while in development mode. Once the production version of angular is built and served I get some errors (the building process itself has no issues):

Uncaught TypeError: (intermediate value)(intermediate value) is not a function
at main.fa7ff4d3b6c3b1d20227.js:1
    at Object.RCq4.t.exports.12.../apply (main.fa7ff4d3b6c3b1d20227.js:1)
    at i (main.fa7ff4d3b6c3b1d20227.js:1)
    at main.fa7ff4d3b6c3b1d20227.js:1
    at main.fa7ff4d3b6c3b1d20227.js:1
    at main.fa7ff4d3b6c3b1d20227.js:1
    at Object.RCq4.t.exports.32../lib/Promise (main.fa7ff4d3b6c3b1d20227.js:1)
    at i (main.fa7ff4d3b6c3b1d20227.js:1)
    at main.fa7ff4d3b6c3b1d20227.js:1
    at Object.RCq4.t.exports.1.../callbacks (main.fa7ff4d3b6c3b1d20227.js:1)

Anyone else has this?

[kyranjamie]

We've also faced these issues, which we understand to be the fault of the when.js dependency. Our (temporary) solution has been to load in autobahn as a global.

[martin31821]

I'm using autobahn.js in an angular 6 app and had to do nothing. Are you sure you are using the autobahn-browser builds?

Edit: I see you're writing about promises, I disabled when.js and used native Promises, since Angular uses those, too... @kyranjamie

[EmilyRagan]

@martin31821 how did you disable when.js and set it to use native Promises? I'm having the same issue and tried setting use_es6_promises: true in my autobahn config, and that alleviated the error that @dArignac stated above, but then I got a different TypeError

[konsultaner]

To fix all this issues in production mode I had to import the autobahn-browser package instead of the regular autobahn package. I also added an autobahn-browser.d.ts next to my main.ts to make use of the type description:

import * as autobahn from 'autobahn';

export = autobahn;

[DStereo]

We have the same problem as @dArignac has.

The problem appears only when you build your application with "buildOptimizer": true set in your angular.json file.

Also I did try to investigate a bit and found out that when you import autobahn in some of your modules or components then the autobahn internally imports when.js from ./dist/browser/when.js which is described in "browser" section of autobahn's package.json file instead of "main" section.

[konsultaner]

@DStereo Using the angular-browser will help you. I came to the same conclusions.

[DStereo]

Thanks @konsultaner . angular-browser did the trick.

[papaiatis]

So If I use the autobahn-browser package how should I make @types/autobahn work? Because for me it looks like it only works for autobahn but not for autobahn-browser.

@konsultaner I tried that code you suggested, the autocomplete seems to be working in VSCode but my angular app does not build, says: Can't resolve 'autobahn' in ...

[konsultaner]

@papaiatis I copied the @types/autobahn into a @types/autobahn-browser package and deployed it into my a private npm repo. I use verdaccio as private repo.

You can also just add a autobahn-browser.d.ts file to your project. this worked for me as well.

[papaiatis]

@konsultaner Thanks for your quick response. I'm trying to achieve the second option. So I created a file autobahn-browser.d.ts next to my Angular app's main.ts file:

import * as autobahn from 'autobahn';
export = autobahn;

Then I import autobahn in an angular service like:

import * as autobahn from 'autobahn-browser';

Which I think is not valid. So how do you import autobahn/autobahn-browser? Little bit confusing for me.

[konsultaner]

@papaiatis I did not add the @types/autobahn. I only copied the contents of the autobahn.d.ts into a autobahn-browser.d.ts file.

I also only added autobahn-browser and not the autobahn node package.