Ngx-bootstrap: Datepicker - Ministate called BehaviourSubject without 'new'

[namnn]

Bug description or feature request:

Traced the code and whenever a datepicker is toggled, this line (mini-ngrx/state.class) breaks aot due to "Class constructor BehaviourSubject cannot be invoked without new"

var _this = _super.call(this, _initialState) || this; (i.e. super(_initialState);)

Plunker/StackBlitz that reproduces the issue:

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 3.0.0

Angular: 6.0.4

Bootstrap: 4.1.1

Build system: Angular CLI, System.js, webpack, starter seed:

Target: ES6

Mode: aot

[artosalminen]

I'm facing the same kind of error when building the Angular app with --prod

This happens when I click the datepicker to open the calendar:

main.ae719998ebd8531303d3.js:1 ERROR TypeError: Class constructor s cannot be invoked without 'new'
    at new t (main.ae719998ebd8531303d3.js:1)
    at new t (main.ae719998ebd8531303d3.js:1)
    at Ns (main.ae719998ebd8531303d3.js:1)
    at Hs (main.ae719998ebd8531303d3.js:1)
    at Ps (main.ae719998ebd8531303d3.js:1)
    at _o (main.ae719998ebd8531303d3.js:1)
    at po (main.ae719998ebd8531303d3.js:1)
    at Object.jo [as createRootView] (main.ae719998ebd8531303d3.js:1)
    at ls.create (main.ae719998ebd8531303d3.js:1)
    at Ht.create (main.ae719998ebd8531303d3.js:1)

• Angular ^6.0.3
• rxJS ^6.2.0
• ngx-bootstrap ^3.0.1
• bootstrap ^4.1.1

tsconfig.json: target: es2015

[artosalminen]

Setting tsconfig.json target: "es5" solved the issue for me

[FrancescoBorzi]

I can confirm this issue

[FrancescoBorzi]

Minimal reproduction of the issue:

import { MiniState } from 'ngx-bootstrap/mini-ngrx';

const test1 = new MiniState(null, null, null);

[FrancescoBorzi]

I finally identified the issue: we are trying to extend an es6 class (BehaviorSubject) from a es5 class (MiniState).

Compiling the library to es6 fixes the issue:

https://github.com/valor-software/ngx-bootstrap/pull/4558

[sherlock1982]

Again I tried to get es6 working and I'm having the same issue.
The problem is in the bundle ngx-bootstrap.es2015.js.
BehaviorSubject is presented inside the bundle as ES5 function constructor and than MiniState extends it.
BehaviorSubject should be imported from rxjs just like all other things.
I think a had a pull request #4366 which fixed the build procedure so everything from rxjs will be imported but than it was rejected.

Additionally that will reduce bundle size of course.

Currently these are all imports from rxjs:

import { filter, map, distinctUntilChanged, observeOn, scan, debounceTime, mergeMap, switchMap, toArray } from 'rxjs/operators';

While such things as ConnectableObservable, BehaviorSubject, Subject, AnonymousSubject and many others are inside bundle increasing it's size.

[FrancescoBorzi]

@sherlock1982 can you try https://github.com/valor-software/ngx-bootstrap/pull/4558 ?

[FrancescoBorzi]

the issue looks like solved in version 3.1.2