angularionic-frameworkionic2

Cannot find namespace NodeJS when using NodeJS.Timer in Ionic 2


I am attempting to use some code I found on https://github.com/bevacqua/dragula/issues/289#issuecomment-277143172 to my Ionic project.

When I run the code I get an error Cannot find namespace 'NodeJS' and the error refers to touchTimeout: NodeJS.Timer;

How can I adapt the code below to make the NodeJS.Timer line work?

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({ selector: '[delayDragLift]' })
export class DelayDragLiftDirective {

    dragDelay: number = 200; // milliseconds
    draggable: boolean = false;
    touchTimeout: NodeJS.Timer;

    @HostListener('touchmove', ['$event'])
    // @HostListener('mousemove', ['$event'])
    onMove(e: Event) {
        if (!this.draggable) {
            e.stopPropagation();
            clearTimeout(this.touchTimeout);
        }
    }

    @HostListener('touchstart', ['$event'])
    // @HostListener('mousedown', ['$event'])
    onDown(e: Event) {
        this.touchTimeout = setTimeout(() => {
            this.draggable = true;
        }, this.dragDelay);
    }

    @HostListener('touchend', ['$event'])
    // @HostListener('mouseup', ['$event'])
    onUp(e: Event) {
        clearTimeout(this.touchTimeout);
        this.draggable = false;
    }

    constructor(private el: ElementRef) {
    }
}

Solution

  • A quick way to solve this problem is here.

    Basically change setTimeout and clearInterval to window.setTimeout and window.clearInterval, respectively. For example, your onDown becomes:

    onDown(e: Event) {
        this.touchTimeout = window.setTimeout(() => {
            this.draggable = true;
        }, this.dragDelay);
    }
    

    Then, your declaration becomes:

    this.touchTimeout: number | undefined;