Subject compiles wrong or do I make a mistake?

I created a simple service. It should send “visible” broadcasts to all subscribers. After compiling it, I got the error message:

ERROR TypeError: Subject_1.Subject is not a constructor at new VisibleService (visible.service.js:24)

But when I add .default to the line this.source = new Subject_1.Subject(); the problems disappears.

RxJS version: rxjs@5.4.3 loaded by systemjs@0.20.18 and compiled by typescript 2.4.2

Code to reproduce:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class VisibleService {
  private source = new Subject<boolean>();

  onDataChange(data: boolean) {
    this.source.next(data);
  }

  observer = this.source.asObservable();
}

Expected behavior:

    "use strict";
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    };
    var __moduleName = context_1 && context_1.id;
    var core_1, Subject_1, VisibleService;
    return {
        setters: [
            function (core_1_1) {
                core_1 = core_1_1;
            },
            function (Subject_1_1) {
                Subject_1 = Subject_1_1;
            }
        ],
        execute: function () {
            VisibleService = (function () {
                //import { BehaviorSubject } from "rxjs/BehaviorSubject"
                function VisibleService() {
                    this.source = new Subject_1.default.Subject();
                    this.observer = this.source.asObservable();
                }
                //private source = new BehaviorSubject<boolean>(false);
                VisibleService.prototype.onDataChange = function (data) {
                    this.source.next(data);
                };
                VisibleService = __decorate([
                    core_1.Injectable()
                ], VisibleService);
                return VisibleService;
            }());
            exports_1("VisibleService", VisibleService);
        }
    };
});

Actual behavior:

    "use strict";
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    };
    var __moduleName = context_1 && context_1.id;
    var core_1, Subject_1, VisibleService;
    return {
        setters: [
            function (core_1_1) {
                core_1 = core_1_1;
            },
            function (Subject_1_1) {
                Subject_1 = Subject_1_1;
            }
        ],
        execute: function () {
            VisibleService = (function () {
                //import { BehaviorSubject } from "rxjs/BehaviorSubject"
                function VisibleService() {
                    this.source = new Subject_1.Subject();
                    this.observer = this.source.asObservable();
                }
                //private source = new BehaviorSubject<boolean>(false);
                VisibleService.prototype.onDataChange = function (data) {
                    this.source.next(data);
                };
                VisibleService = __decorate([
                    core_1.Injectable()
                ], VisibleService);
                return VisibleService;
            }());
            exports_1("VisibleService", VisibleService);
        }
    };
});

Additional information: My tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "../js/3rd",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2017", "dom"],
        "module": "System",
        "outDir": "../js",
        "target": "ES5"
    }
}

[kwonoj]

You can rule out by not invloving any angular/systemjs but creating plain ts with rx only to verify it first, by creating subject only as snippet does. If it still doesn’t work, then rx does something wrong. If not, probably some config or behavior of systemjs need to be looked into.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.