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

22,484

Solution 1

Open src/tsconfig.app.json*.

Add "node" to the "types" array.

Example:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [
      "node"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

*if this file does not exist add the specified part to tsconfig.json in root folder.

Solution 2

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;
Share:
22,484
Chris
Author by

Chris

Updated on July 31, 2022

Comments

  • Chris
    Chris over 1 year

    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) {
        }
    }
    
  • muuvmuuv
    muuvmuuv over 3 years
    This should be accepted, since you shouldn't include node types into an Angular project which is targeting browsers.