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

[dsge]

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?

[Agranom]

Yes, you're right. That's because Rxjs was updated to 6 version, so you have to update your angular.

[Agranom]

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

[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 :D

You may close this issue if you wish, thanks!

[Agranom]

Sorry for confusing you, I forgot to update the readme )

[ilancohen]

I'm having the same error with the latest version of this package, though I'm using angular 7.2,5 and rxjs 6.4.0.
It's erroring out on the line:
NgxMaterialTimepickerService.ngInjectableDef = ɵɵdefineInjectable({ factory: function NgxMaterialTimepickerService_Factory() { return new NgxMaterialTimepickerService(); }, token: NgxMaterialTimepickerService, providedIn: "root" });

I include NgxMaterialTimepickerModule in my module.

[Agranom]

which version of timepicker do you use ?

[ilancohen]

This was with 3.3.0.

[ilancohen]

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

[phare2013]

I appreciate your work. Just any FYI @angular/core @7.2.15 and ngx-material-timepicker@4.0.0 seem to be not be compatible at this time as well.

Here is the error:

ngx-material-timepicker.js:231 Uncaught TypeError: Object(...) is not a function
    at ngx-material-timepicker.js:231
    at Module../node_modules/ngx-material-timepicker/fesm5/ngx-material-timepicker.js (ngx-material-timepicker.js:238)
    at __webpack_require__ (bootstrap:78)
    at Module../src/app/app.module.ts (app.component.ts:12)
    at __webpack_require__ (bootstrap:78)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:78)
    at Object.0 (main.ts:12)
    at __webpack_require__ (bootstrap:78)
    at checkDeferredModules (bootstrap:45)
(anonymous) @ ngx-material-timepicker.js:231
./node_modules/ngx-material-timepicker/fesm5/ngx-material-timepicker.js @ ngx-material-timepicker.js:238
__webpack_require__ @ bootstrap:78
./src/app/app.module.ts @ app.component.ts:12
__webpack_require__ @ bootstrap:78
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1

[Agranom]

@phare2013 I know. v4.0.0 works with angular 8. You have to downgrade your package. Look at CHANGELOG.md

[phare2013]

Thanks!