Deploying an angular 6 app using fabric.js on heroku - heroku

Question

I have to deploy an angular 6 application that uses fabric.js on heroku. I have done all the steps required for deploying a simple angular 6 app and the simple app worked. But, with fabricjs, it does not.
Here is the package.json file
{
"name": "projname",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build -prod"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.1.10",
"#angular/cdk": "^6.4.7",
"#angular/common": "^6.1.0",
"#angular/compiler": "^6.1.0",
"#angular/core": "^6.1.0",
"#angular/forms": "^6.1.0",
"#angular/http": "^6.1.0",
"#angular/material": "^6.4.7",
"#angular/platform-browser": "^6.1.0",
"#angular/platform-browser-dynamic": "^6.1.0",
"#angular/router": "^6.1.0",
"angular-froala-wysiwyg": "^2.8.5",
"core-js": "^2.5.4",
"express": "^4.16.4",
"fabric": "^2.4.1",
"path": "^0.12.7",
"rxjs": "~6.2.0",
"typescript": "~2.9.2",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.8.0",
"#angular/cli": "^6.2.5",
"#angular/compiler-cli": "^6.1.10",
"#angular/language-service": "^6.1.0",
"#types/fabric": "^1.5.43",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.3.0",
"enhanced-resolve": "^3.3.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"surge": "^0.20.1",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.9.2"
},
"engines": {
"node": "8.9.4",
"npm": "5.6.0"
}
}
All the required dependencies for a simple angular 6 app have been done. The server has also been set up. Here is the server.js file.
//Install express server
const express = require('express');
const path = require('path');
const app = express();
// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist/projname'));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname + '/dist/projname/index.html'));
});
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);
And, lastly here is the output. I think there is some problem with the node_module canvas. Thanks.
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): 8.9.4
engines.npm (package.json): 5.6.0
Resolving node version 8.9.4...
Downloading and installing node 8.9.4...
npm 5.6.0 already installed with node
-----> Restoring cache
Cached directories were not restored due to a change in version of node, npm, yarn or stack
Module installation may take longer for this build
-----> Building dependencies
Installing node modules (package.json + package-lock)
> canvas#1.6.12 install /tmp/build_2bdbd84339a09d50e7de179986c6e0f3/node_modules/canvas
> node-gyp rebuild
make: Entering directory '/tmp/build_2bdbd84339a09d50e7de179986c6e0f3/node_modules/canvas/build'
SOLINK_MODULE(target) Release/obj.target/canvas-postbuild.node
COPY Release/canvas-postbuild.node
CXX(target) Release/obj.target/canvas/src/Canvas.o
In file included from ../src/Canvas.cc:20:0:
../src/JPEGStream.h: In function ‘boolean empty_closure_output_buffer(j_compress_ptr)’:
../src/JPEGStream.h:42:108: warning: ‘v8::Local<v8::Value> Nan::MakeCallback(v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*)’ is deprecated [-Wdeprecated-declarations]
Nan::MakeCallback(Nan::GetCurrentContext()->Global(), (v8::Local<v8::Function>)dest->closure->fn, 2, argv);
^
In file included from ../src/Canvas.h:22:0,
from ../src/Canvas.cc:7:
../../nan/nan.h:958:46: note: declared here
NAN_DEPRECATED inline v8::Local<v8::Value> MakeCallback(
^~~~~~~~~~~~
In file included from ../src/Canvas.cc:20:0:
../src/JPEGStream.h: In function ‘void term_closure_destination(j_compress_ptr)’:
../src/JPEGStream.h:63:113: warning: ‘v8::Local<v8::Value> Nan::MakeCallback(v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*)’ is deprecated [-Wdeprecated-declarations]
Nan::MakeCallback(Nan::GetCurrentContext()->Global(), (v8::Local<v8::Function>)dest->closure->fn, 2, data_argv);
^
In file included from ../src/Canvas.h:22:0,
from ../src/Canvas.cc:7:
../../nan/nan.h:958:46: note: declared here
NAN_DEPRECATED inline v8::Local<v8::Value> MakeCallback(
^~~~~~~~~~~~
In file included from ../src/Canvas.cc:20:0:
../src/JPEGStream.h:71:112: warning: ‘v8::Local<v8::Value> Nan::MakeCallback(v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*)’ is deprecated [-Wdeprecated-declarations]
Nan::MakeCallback(Nan::GetCurrentContext()->Global(), (v8::Local<v8::Function>)dest->closure->fn, 2, end_argv);
^
In file included from ../src/Canvas.h:22:0,
from ../src/Canvas.cc:7:
../../nan/nan.h:958:46: note: declared here
NAN_DEPRECATED inline v8::Local<v8::Value> MakeCallback(
^~~~~~~~~~~~
../src/Canvas.cc: In static member function ‘static void Canvas::ToBufferAsyncAfter(uv_work_t*)’:
../src/Canvas.cc:221:31: warning: ‘v8::Local<v8::Value> Nan::Callback::Call(int, v8::Local<v8::Value>*) const’ is deprecated [-Wdeprecated-declarations]
closure->pfn->Call(1, argv);
^
In file included from ../src/Canvas.h:22:0,
from ../src/Canvas.cc:7:
../../nan/nan.h:1655:3: note: declared here
Call(int argc, v8::Local<v8::Value> argv[]) const {
^~~~
../src/Canvas.cc:226:31: warning: ‘v8::Local<v8::Value> Nan::Callback::Call(int, v8::Local<v8::Value>*) const’ is deprecated [-Wdeprecated-declarations]
closure->pfn->Call(2, argv);
^
In file included from ../src/Canvas.h:22:0,
from ../src/Canvas.cc:7:
../../nan/nan.h:1655:3: note: declared here
Call(int argc, v8::Local<v8::Value> argv[]) const {
^~~~
../src/Canvas.cc: In function ‘cairo_status_t streamPNG(void*, const uint8_t*, unsigned int)’:
../src/Canvas.cc:377:102: warning: ‘v8::Local<v8::Value> Nan::MakeCallback(v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*)’ is deprecated [-Wdeprecated-declarations]
Nan::MakeCallback(Nan::GetCurrentContext()->Global(), (v8::Local<v8::Function>)closure->fn, 3, argv);
^
In file included from ../src/Canvas.h:22:0,
from ../src/Canvas.cc:7:
../../nan/nan.h:958:46: note: declared here
NAN_DEPRECATED inline v8::Local<v8::Value> MakeCallback(
^~~~~~~~~~~~
../src/Canvas.cc: In static member function ‘static Nan::NAN_METHOD_RETURN_TYPE Canvas::StreamPNGSync(Nan::NAN_METHOD_ARGS_TYPE)’:
../src/Canvas.cc:446:103: warning: ‘v8::Local<v8::Value> Nan::MakeCallback(v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*)’ is deprecated [-Wdeprecated-declarations]
Nan::MakeCallback(Nan::GetCurrentContext()->Global(), (v8::Local<v8::Function>)closure.fn, 1, argv);
^
In file included from ../src/Canvas.h:22:0,
from ../src/Canvas.cc:7:
../../nan/nan.h:958:46: note: declared here
NAN_DEPRECATED inline v8::Local<v8::Value> MakeCallback(
^~~~~~~~~~~~
../src/Canvas.cc:452:103: warning: ‘v8::Local<v8::Value> Nan::MakeCallback(v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*)’ is deprecated [-Wdeprecated-declarations]
Nan::MakeCallback(Nan::GetCurrentContext()->Global(), (v8::Local<v8::Function>)closure.fn, 1, argv);
^
In file included from ../src/Canvas.h:22:0,
from ../src/Canvas.cc:7:
../../nan/nan.h:958:46: note: declared here
NAN_DEPRECATED inline v8::Local<v8::Value> MakeCallback(
^~~~~~~~~~~~
../src/Canvas.cc: In function ‘cairo_status_t streamPDF(void*, const uint8_t*, unsigned int)’:
../src/Canvas.cc:476:77: warning: ‘v8::Local<v8::Value> Nan::MakeCallback(v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*)’ is deprecated [-Wdeprecated-declarations]
Nan::MakeCallback(Nan::GetCurrentContext()->Global(), closure->fn, 3, argv);
^
In file included from ../src/Canvas.h:22:0,
from ../src/Canvas.cc:7:
../../nan/nan.h:958:46: note: declared here
NAN_DEPRECATED inline v8::Local<v8::Value> MakeCallback(
^~~~~~~~~~~~
In file included from ../src/Canvas.cc:8:0:
../src/PNG.h: In function ‘cairo_status_t canvas_write_png(cairo_surface_t*, png_rw_ptr, void*)’:
../src/PNG.h:73:20: warning: variable ‘status’ might be clobbered by ‘longjmp’ or ‘vfork’ [-Wclobbered]
cairo_status_t status = CAIRO_STATUS_SUCCESS;
^~~~~~
CXX(target) Release/obj.target/canvas/src/CanvasGradient.o
CXX(target) Release/obj.target/canvas/src/CanvasPattern.o
CXX(target) Release/obj.target/canvas/src/CanvasRenderingContext2d.o
CXX(target) Release/obj.target/canvas/src/color.o
CXX(target) Release/obj.target/canvas/src/Image.o
../src/Image.cc: In member function ‘void Image::loaded()’:
../src/Image.cc:380:25: warning: ‘v8::Local<v8::Value> Nan::Callback::Call(int, v8::Local<v8::Value>*) const’ is deprecated [-Wdeprecated-declarations]
onload->Call(0, NULL);
^
In file included from ../src/Canvas.h:22:0,
from ../src/Image.cc:7:
../../nan/nan.h:1655:3: note: declared here
Call(int argc, v8::Local<v8::Value> argv[]) const {
^~~~
../src/Image.cc: In member function ‘void Image::error(v8::Local<v8::Value>)’:
../src/Image.cc:393:26: warning: ‘v8::Local<v8::Value> Nan::Callback::Call(int, v8::Local<v8::Value>*) const’ is deprecated [-Wdeprecated-declarations]
onerror->Call(1, argv);
^
In file included from ../src/Canvas.h:22:0,
from ../src/Image.cc:7:
../../nan/nan.h:1655:3: note: declared here
Call(int argc, v8::Local<v8::Value> argv[]) const {
^~~~
CXX(target) Release/obj.target/canvas/src/ImageData.o
CXX(target) Release/obj.target/canvas/src/init.o
CXX(target) Release/obj.target/canvas/src/FontFace.o
SOLINK_MODULE(target) Release/obj.target/canvas.node
COPY Release/canvas.node
make: Leaving directory '/tmp/build_2bdbd84339a09d50e7de179986c6e0f3/node_modules/canvas/build'
> node-sass#4.9.3 install /tmp/build_2bdbd84339a09d50e7de179986c6e0f3/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.3/linux-x64-57_binding.node
Download complete
Binary saved to /tmp/build_2bdbd84339a09d50e7de179986c6e0f3/node_modules/node-sass/vendor/linux-x64-57/binding.node
Caching binary to /tmp/npmcache.Ba6aC/node-sass/4.9.3/linux-x64-57_binding.node
> circular-json#0.5.7 postinstall /tmp/build_2bdbd84339a09d50e7de179986c6e0f3/node_modules/circular-json
> echo ''; echo "\x1B[1mCircularJSON\x1B[0m is in \x1B[4mmaintenance only\x1B[0m, \x1B[1mflatted\x1B[0m is its successor."; echo ''
\x1B[1mCircularJSON\x1B[0m is in \x1B[4mmaintenance only\x1B[0m, \x1B[1mflatted\x1B[0m is its successor.
> node-sass#4.9.3 postinstall /tmp/build_2bdbd84339a09d50e7de179986c6e0f3/node_modules/node-sass
> node scripts/build.js
Binary found at /tmp/build_2bdbd84339a09d50e7de179986c6e0f3/node_modules/node-sass/vendor/linux-x64-57/binding.node
Testing binary
Binary is fine
> bimscoper#0.0.0 postinstall /tmp/build_2bdbd84339a09d50e7de179986c6e0f3
> ng build -prod
Unknown option: '-p'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bimscoper#0.0.0 postinstall: `ng build -prod`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bimscoper#0.0.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.Ba6aC/_logs/2018-10-18T18_42_10_164Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed

Answer 1

Hey do you resolved your issue ?
Did you simply try add the link cdn or fabric project <script src="./assets/fabric.js"></script> in asset to your index on the angular project ?
after imports, declare fabric as any
declare const fabric: any;
Use it in 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);
}