How to use / include fabricjs in Angular2
I want use fabricjs in my project. I installed fabricjs using bower and linked in index.html. but it is not working. Please see the below code.
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>
This is component file "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
});
}
}
I have search many reference but couldn't find out what is wrong with my. Please advice, thank you.
Answer
Modern usage:
- Install Fabric:
npm i fabric - Install types:
npm i @types/fabric
Demo with Angular 5.2.8 and 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!'));
}
}