question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
ilancohencommented, Jun 13, 2019

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

2reactions
dsgecommented, Jul 9, 2018

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular HttpClient TypeError: Object(...) is not a function
1 Answer 1 · It seems that migrating the rxjs-compat imports to rxjs helps. · Hi @Sami, I am running into same problem...
Read more >
Polyfills.js:3 Uncaught TypeError: t.resolve is not a function ...
Created component in our existing project. we tried pointing to a locally hosted zoom scripts, i.e. audio/ av/ /lang /zoom-meeting-ES5.min.js / ...
Read more >
Paypal Integration TypeError: Object(...) is not a function
hi, i am right into the PayPal payment but i get the following error: CheckoutPage.html:152 ERROR TypeError: Object(...) is not a function ......
Read more >
Object(...) is not a function on Angular 7 - MDBootstrap
The application should render normally. Actual behavior. We get the following error while trying to access to the application: ng-uikit-pro-standard.js:10904 ...
Read more >
TagBox - The "items.filter is not a function" error is thrown ...
Hello, We use tag box control with angular in popup, devextreme: 18.1.11, angular: 5.2.11. We bind tag box value to our variable.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found