javascript - Πώς να χρησιμοποιήσετε/περιλάβετε το fabricjs στο Angular2

Θέλω να χρησιμοποιήσω το fabricjs στο έργο μου. Εγκατέστησα το fabricjs χρησιμοποιώντας το bower και το σύνδεσα στο index.html. Αλλά δεν λειτουργεί. Παρακαλώ δείτε τον παρακάτω κώδικα.

index.html

<html>

<head>
 <script>document.write('<base href="' + document.location + '" />');         </script>
  <title>Image Editor</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap/dist/css/bootstrap.min.css">

  <!-- 1. Load libraries -->
  <!-- Polyfill(s) for older browsers -->
  <script src="libs/core-js/client/shim.min.js"></script>
  <script src="libs/zone.js/dist/zone.js"></script>
  <script src="libs/reflect-metadata/Reflect.js"></script>
  <script src="libs/systemjs/dist/system.src.js"></script>

  <script src="css/jquery/dist/jquery.min.js"></script>
  <script src="css/bootstrap/dist/js/bootstrap.min.js"></script>
  // incuding fabricjs here
  <script src="../../bower_components/fabric.js/dist/fabric.min.js"></script>

  <!-- 2. Configure SystemJS -->
  <script src="systemjs.config.js"></script>
  <script>
  System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>

<!-- 3. Display the application -->

<body>
     <my-app>Loading...</my-app>
</body>
</html>

Αυτό είναι το αρχείο συστατικού "stage.component.ts"

import {Component, OnInit} from '@angular/core';
import { ActivatedRoute, Router} from '@angular/router';
import { fabric } from 'fabric';
import { ImageService } from '../services/image.service';

declare var fabric:any;
 @Component({
   selector:'my-stage',
   styleUrls: ['./app/stage/stage.component.css'],
   templateUrl: './app/stage/stage.component.html',
 })

 export class StageComponent implements OnInit {
    title:string = 'Image Editor';
    imgpath: string = '';
     canvas:any = null;

   // fabric:any = null;
    constructor(
       private route: ActivatedRoute,
    ) {
    //  this.fabric = new fabric();
    }

  ngOnInit() {

     this.canvas = new fabric.Canvas('fstage', {
        isDrawingMode: true,
        selection: true
      });
  }
}

Έχω ψάξει πολλές αναφορές αλλά δεν μπόρεσα να βρω τι δεν πάει καλά με το δικό μου. Παρακαλώ συμβουλέψτε, ευχαριστώ.

Απάντηση #1

Σύγχρονη χρήση:

1. Εγκατάσταση Fabric: npm i fabric
2. Εγκατάσταση τύπων: npm i @types/fabric

Δοκιμή με Angular 5.2.8 και Fabric 2.2.2

HTML

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

TypeScript

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('myCanvas');
    this.canvas.add(new fabric.IText('Hello Fabric!'));
  }
}

Απάντηση #2

Μπορώ να χρησιμοποιήσω το fabric.js χωρίς τη γραμμή

import { fabric } από 'fabric';

φόρτωση του script στο index.html και δήλωση της βιβλιοθήκης στο αρχείο ts:

import { Component } from '@angular/core';
declare var fabric: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  printValue() {
    console.log(fabric.version);
  };
}

Στην κονσόλα του προγράμματος περιήγησης:

1.6.7  app.component.ts:13