How to render an image of an AngularJs website?

Question

I'm using wkhtmltoimage. It works fine for e.g. http://stackoverflow.com

But when I try to run in on any website with AngularJs (e.g. https://material.angularjs.org/latest/):

wkhtmltoimage.exe --no-stop-slow-scripts --javascript-delay 5000 --enable-javascript --debug-javascript   https://material.angularjs.org/latest/ C:\\dev\\temp\\0c8fca2c-0990-40c4-8672-12fc71ec6cf6.png

A get an error JS error (thanks to : --debug-javascript flag)

Loading page (1/2)
Warning: undefined:0 Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=ng&p1='undefined'%20is%20not%20an%20object
Rendering (2/2)

The result image is just a tiny white stripe.

How to ren

Answer 1

It seems that wkhtmltopdf doesn't play nicely with Function.prototype.bind (used in Angular >= 1.5), so you need to provide a "polyfill" to make it works.

Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
        throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
            return fToBind.apply(this instanceof fNOP
                ? this
                : oThis,
                aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    if (this.prototype) {
        fNOP.prototype = this.prototype; 
    }

    fBound.prototype = new fNOP();

    return fBound;
};