Angular production build gives problems with autobahn

[sevaho]

Problem

The problem is that when running production mode I get an error but when running dev mode everything works.

Version

ng version:

Angular CLI: 1.7.3
Node: 9.10.1
OS: linux x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Steps to reproduce

I create a new project:

ng new my-app

I install autobahn (NOT globally installed)

npm install autobahn

package.json file:

{
  "name": "my-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "autobahn": "^18.3.2",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

I edit 1 file: src/app/app.component.ts:

import { Component } from '@angular/core';
import { Autobahn } from 'autobahn';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  ngOnInit() {
      console.log(Autobahn);
  }
}

I run: ng serve or ng build (and serve with nginx) no errors.

But when I run ng serve --prod or ng build --prod and serve with nginx I get the following error in the browser console:

Uncaught TypeError: (intermediate value)(intermediate value) is not a function
    at main.6212a35041b6907f2b07.bundle.js:1
    at Object.12.../apply (main.6212a35041b6907f2b07.bundle.js:1)
    at i (main.6212a35041b6907f2b07.bundle.js:1)
    at main.6212a35041b6907f2b07.bundle.js:1
    at main.6212a35041b6907f2b07.bundle.js:1
    at main.6212a35041b6907f2b07.bundle.js:1
    at Object.32../lib/Promise (main.6212a35041b6907f2b07.bundle.js:1)
    at i (main.6212a35041b6907f2b07.bundle.js:1)
    at main.6212a35041b6907f2b07.bundle.js:1
    at Object.1.../callbacks (main.6212a35041b6907f2b07.bundle.js:1)

[kyranjamie]

Unsure if this is the cause of your issue, but spotted a naming mistake:

NgOnInit () should be ngOnInit ()

[sevaho]

I made a typo indeed, but that is not the case.

The problem lies with the autobahn library does not have types, but there is a package @types/autobahn, but I can't seem to figure out how to make it work with the package.

[sevaho]

Fixed it by changing:

target: "es5" in tsconfig.json to target: "es2015"

[EmilyRagan]

Changing the target is not a good solution because es2015 is much newer and therefore doesn't have support in as many versions of browsers. We would love to assume that this shouldn't be an issue because people should have up to date browsers, but there's still an inordinate amount of people using Internet Explorer (which isn't supported at all by es2015) and older versions of Chrome, Firefox, etc due to company requirements and/or individual ignorance of browser updates. I'd like to see a real solution to this, but this might require an update to when.js, which is a dependency of autobahn (if you build with --prod --sourcemaps=true, you can see that the errors come from the when.js pre-build-optimizer)