Uncaught Reference Error in App yet it is working fine in Stackblitz

Question

This proof of concept directive works fine in firefox stackblitz and when it is exported into vs code; however when I try to bring it into my application it is giving me an Uncaught Reference Error. This is what it looks like in the browser:

Context: My directive is placed on the parent and interacts with child nodes. It is supposed to work so that on (mouseup) within the host parent view box container it gets the center of all child components' space/positions, calculates their x-midlines, and scrolls to the component with the x-midline closest to the parent/view box midline. Any insights are appreciated! Thanks

Directive:

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

@Directive({
  selector: '[windowsnap]'
})
export class WindowSnapDirective implements OnInit, AfterViewInit, {



  scrollhistory = [];
  parent = this.el.nativeElement;

  constructor(private el: ElementRef) {console.log('windowsnap constructor')
   }

  ngOnInit(){
   console.log('windowsnap oninit')
  }
  ngAfterViewInit(){
   console.log('windowsnap afterviewinit')
  }

  closest(num, arr) {
    let curr = arr[0];
    arr.forEach( (val)=>{
        if (Math.abs(num - val) < Math.abs(num - curr)){
          curr = val
        }
    });
    return curr;
  }


 @HostListener('mouseup') onMouseUp() {
    // logging x-scroll history into an array
    this.scrollhistory.unshift(this.parent.scrollLeft);
    console.log(this.scrollhistory)

    // this is to prevent unnecesary scrolls to the same component
    if(this.parent.scrollLeft != this.scrollhistory[1]){


    //  child element declarations
    let child1El = this.parent.querySelector('child1');
    let child2El = this.parent.querySelector('child2');
    let child3El = this.parent.querySelector('child3');

    // child1 boundaries
    let child1leftBoundary:number = child1El.offsetLeft;
    let child1middleBoundary: number = child1El.offsetWidth*0.5 + child1leftBoundary ;
    let child1rightBoundary: number = child1El.offsetWidth + child1leftBoundary ;
    // console.log('child1 Left: ' + child1leftBoundary +', child1 Middle: ' + child1middleBoundary +  ', child1 Right: ' + child1rightBoundary)

    // child2 boundaries
    let child2leftBoundary:number = child2El.offsetLeft;
    let child2middleBoundary: number = child2El.offsetWidth*0.5 + child2leftBoundary ;
    let child2rightBoundary: number = child2El.offsetWidth + child2leftBoundary ;
    // console.log('child2 Left: ' + child2leftBoundary + ', child2 Middle: ' + child2middleBoundary + ', child2 Right: ' + child2rightBoundary)

    // child3 boundaries
    let child3leftBoundary:number = child3El.offsetLeft;
    let child3middleBoundary: number = child3El.offsetWidth*0.5 + child3leftBoundary ;
    let child3rightBoundary: number = child3El.offsetWidth + child3leftBoundary ;
    console.log('child3 Left: ' + child3leftBoundary + ', child3 Middle: ' + child3middleBoundary + ', child3 Right: ' + child3rightBoundary)


    //  x view boundaries
    let viewBoxL = ( this.parent.scrollLeft)
    let viewBoxC = ( this.parent.scrollLeft + (this.parent.offsetWidth*0.5))
    let viewBoxR = ( this.parent.scrollLeft + (this.parent.offsetWidth))
    // console.log(viewBoxL);
    // console.log( this.parent.scrollLeft + (this.parent.offsetWidth*0.5));
    // console.log( this.parent.scrollLeft + (this.parent.offsetWidth));


    //positioning calculations
    let a = (viewBoxC-child1middleBoundary)
    // console.log('a:' + a)
    let b = (viewBoxC-child2middleBoundary)
    // console.log('b:' + b)
    let c = (viewBoxC-child3middleBoundary)
    // console.log('c:' + c)


    // make list of children mid points and get closest number to zero
    let closestChildMid = this.closest(0, [a, b, c])
    console.log("closest: " + closestChildMid)

    //if a highest number scroll to childa
    if(closestChildMid === a){
    child1El.scrollIntoView({behavior: "smooth", block: "center"});
    }
    //if b highest number scroll to childb
    if(closestChildMid === b){
    child2El.scrollIntoView({behavior: "smooth", block: "center"});
    }
    //if c highest number scroll to childc
    if(closestChildMid === c){
    child3El.scrollIntoView({behavior: "smooth", block: "center"});
    }
  }
  }
}

Answer 1

You have an extra comma

export class WindowSnapDirective implements OnInit, AfterViewInit, {

Should be

export class WindowSnapDirective implements OnInit, AfterViewInit {