"TypeError: Object(...) is not a function" on Angular 5.2.11

I’ve installed ngx-material-timepicker@2.2.3. Added:

import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
@NgModule({
  imports: [
    // ...
    NgxMaterialTimepickerModule.forRoot()
  ],

And then added:

<form class="example-form">
        <mat-form-field>
            <input [ngxTimepicker]="picker">
            <ngx-material-timepicker #picker></ngx-material-timepicker>
        </mat-form-field>

I get this error in the console upon opening the page where the timepicker would show up:

ERROR TypeError: Object(...) is not a function
    at new NgxMaterialTimepickerComponent (ngx-material-timepicker.js:152)
    at createClass (core.js:12483)
    at createDirectiveInstance (core.js:12326)
    at createViewNodes (core.js:13784)
    at callViewAction (core.js:14218)
    at execComponentViewsAction (core.js:14127)
    at createViewNodes (core.js:13812)
    at createRootView (core.js:13673)
    at callWithDebugContext (core.js:15098)
    at Object.debugCreateRootView [as createRootView] (core.js:14381)

ngx-material-timepicker.js:152 refers to this line (this is the compiled version vendor.bundle.js):

this.subscriptions.push(Object(__WEBPACK_IMPORTED_MODULE_1_rxjs__["merge"])(this.eventService.backdropClick, this.eventService.keydownEvent.pipe(Object(__WEBPACK_IMPORTED_MODULE_4_rxjs_operators__["a" /* filter */])(function (e) { return e.keyCode === ESCAPE && _this.isEsc; })))
            .subscribe(function () { return _this.close(); }));

Which was compiled from this: ngx-material-timepicker.component.ts#L60

My theory:

I think the issue may be related to the fact that angular 5.2.11 uses rxjs@5.5.5 and this library and angular@6 uses rxjs@6. The behaviour of merge might be different or might be missing completely in the version used by angular@5.2.11.

Am I using this library correctly? Is angular5 still supported?

[ilancohen]

I rolled back to 3.0.0, and it works fine (with an external dependency of luxon).

[dsge]

Or you can use an earlier version of timepicker, if those features are enough for you

Thank you for mentioning this. I’ve tried v2.2.3, v2.2.2 and v2.1.2 but I did not even look at v1.x because I thought there were breaking changes or some significant difference between v1.x and v2.x.

Downgrading to ngx-material-timepicker@1.1.2 does indeed make the timepicker appear as expected. 👍

That’s because Rxjs was updated to 6 version, so you have to update your angular.

I might have to do that for my current project, but for now I would like to avoid that if possible. I found this library by specifically looking for something that is supposed to work with angular 5 and this one said that it’s compatible with angular 4+. I see that you already updated the readme - at least noone else will fall into the same trap as I did 😄

You may close this issue if you wish, thanks!