angular - Angular2 + FabricJS + HammerJS のセットアップ

Question

これまでのところ、angular2プロジェクトをhammerjsおよびfabricjsと組み合わせて実行しようとしています。

私のapp.component.ts

    import { Component, OnInit } from '@angular/core';

declare var fabric: any;
let canvas: any;

    @Component({
      selector: 'ca-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      ngOnInit() {
    canvas = new fabric.Canvas('drawing_layer');
    const backImage = new Image();

    backImage.src = 'http://lorempixel.com/600/600/sports/';
    backImage.onload = () => {
      canvas.setBackgroundImage(backImage.src, canvas.renderAll.bind(canvas), {
        originX: 'left',
        originY: 'top',
        left: 0,
        top: 0,
      });

    };
  }
    }

canvas.on({
  'mouse:down': (ev) => {
    const pointer: any = canvas.getPointer(ev.e);
    const circle: any = new fabric.Circle({
      left: pointer.x,
      top: pointer.y,
      radius: 5,
      strokeWidth: 5,
      stroke: 'red',
      selectable: false,
      originX: 'center', originY: 'center',
    });

    canvas.add(circle);
  },
  'object:selected': (ev) => {
    console.info('object selected');
  },
  'selection:cleared': (ev) => {
console.info('selection cleared');
  },
});

let hammertime = new Hammer(document.getElementById("canvas-wrapper"));
hammertime.get("pinch").set({ enable: true });
hammertime.get("pan").set({ direction: Hammer.DIRECTION_ALL, threshold: 100 });
hammertime.on("pan", (ev) => {
    let fDeltaX: number;
    let fDeltaY: number;

    if (ev.pointerType === "mouse") {
        fDeltaX = ev.deltaX / 100;
        fDeltaY = ev.deltaY / 100;
    } else {
        fDeltaX = ev.deltaX / 10;
        fDeltaY = ev.deltaY / 10;
    }

    if (pageState.panning) {
        canvas.relativePan(new fabric.Point(Math.round(fDeltaX), Math.round(fDeltaY)));
    }
});
hammertime.on("pinch", (ev) => {
    canvas.setZoom(canvas.getZoom() * (ev.scale / 100));
});

私のapp.component.html

<div id="canvas-wrapper">
  <canvas id="drawing_layer"></canvas>
</div>

app.component.css

.upper-canvas {
  width: 100% !important;
  height: 100% !important;
}

現在、「canvas.on」で例外をスローしています。現在、angular2 を fabricjs および/または hammerjs と効果的に使用する方法を示すオンラインの例を確認できませんでした。