Phantom screenshots of heavy JS sites

Question

Phantom screenshots of heavy JS sites

I used different options and suggestions from almost a dozen answers in SO, but nothing seems to help solve this problem, which I will discuss below.

There are several sites where phantomjs screenshots do not look good, the content is downloaded through javascript after the page has finished loading, so the screenshots look like the missing ones. I also posted the problem on the problems page of the Github project, but the answers do not help.

https://github.com/ariya/phantomjs/issues/14341

One of the sites in the context of https://angular.io/

I tried to take a screenshot on the Load Finished page, after some delay using setTimeout, and also tried to implement the waitFor method, as described here: Implement waitFor functionality with phantomjs-node

Any thing better than the attached screenshot of the site will be accepted as an answer. To check what I'm saying, this code can be used: https://github.com/crackjack/bulk-shot/

This code works, but gives only a section, as expected. if you increase the height further, the screenshot will not work.

var webPage = require('webpage');
var page = webPage.create();

page.viewportSize = {
    width: 1024,
    height: 960
};

// Portion of the page to take a screenshot of
page.clipRect = {
    top: 0,
    left: 0,
    width: 1024,
    height: 960
};

page.open('https://angular.io/', function (status) {
    window.setTimeout(function(){
        page.render('angular.jpg');
        phantom.exit();
    }, 1000);
});