Using Fabric.js with Angular 4

angular-editor-fabric-js is a "drag-and-drop editor based on Fabricjs for Angular v5 with multiple options"

You can use it as insipiration.

I do something similar. Not using exactly the links you provided though. I use fabric js along with canvas and angular4 to drag and drop png-files onto the canvas like this. Component:

import { Component, OnInit} from '@angular/core';
import 'fabric';
declare const fabric: any;

@Component({
  selector: 'app-image-preview',
  templateUrl: './image-preview.component.html',
  styleUrls: ['./image-preview.component.styl']
})
export class ImagePreviewComponent implements OnInit {

  image: any;
  file:File = null;
  canvas:any;

  constructor() { }

  ngOnInit() {
    //this.context = this.canvasRef.nativeElement.getContext('2d');
      this.canvas = new fabric.Canvas('canvas', { selection: false });
  }

  handleDrop(e) {
    this.file = e.dataTransfer.files[0];
    const reader = new FileReader();

    reader.onload = (imgFile) => {
      console.log(imgFile);
      const data = imgFile.target["result"];                    
      fabric.Image.fromURL(data, (img) => {
        let oImg = img.set({
          left: 0,
          top: 0,
          angle: 0
        }).scale(1);
      this.canvas.add(oImg).renderAll();
      var a = this.canvas.setActiveObject(oImg);
      var dataURL = this.canvas.toDataURL({format: 'png', quality: 0.8});
      });
    };
    reader.readAsDataURL(this.file);
    return false;
  }
}

HTML template:

<div
  (dragover)="false"
  (dragend)="false"
  (drop)="handleDrop($event)">
  <canvas id="canvas" class="canvas" width="500" height="500">
  </canvas>
</div>

fabric.js + Angular 7.x

For me it works in this scenario:

1. copy fabric.js to some folder, for example to "/assets" and then include it into index.html

<script src="./assets/fabric.js"></script>

2. after imports, declare fabric as any

declare const fabric: any;

3. create canvas div in angular template

<canvas id="canvas" width="300" height="300"></canvas>

4. add implements AfterViewInit in your component and move fabric initialization into ngAfterViewInit event handler

ngAfterViewInit() {
       const canvas = new fabric.Canvas('canvas');
       const rect = new fabric.Rect({
          top : 100,
          left : 100,
          width : 60,
          height : 70,
          fill : 'red'
       });
       canvas.add(rect);
}

What worked for me (2Toad's solution: https://stackoverflow.com/a/49481766/9753985) on Angular 7:

First install fabric:

• npm i fabric

• npm i @types/fabric

Add the canvas element in your HTML:

<canvas id="canvas" width="500" height="500"></canvas>

Then in your TS import fabric and create your fabric object :

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

 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
 })
 export class AppComponent implements OnInit  {

   canvas: any;

   ngOnInit() {
     this.canvas = new fabric.Canvas('canvas');
     this.canvas.add(new fabric.IText('Hello World !'));
   }
 }