Puppeteer server-side rendering fails with Angular 1.4 showing empty content

Other Questions Puppeteer
1

I’m trying to implement server-side rendering for my Angular 1.4 application using Puppeteer but running into issues. When I test the rendered output using online SEO tools, I only see a blank page instead of the actual content.

Here’s my current implementation:

(async function() {
    const puppeteer = require('puppeteer');
    
    const browserInstance = await puppeteer.launch({
        executablePath: '/usr/bin/google-chrome',
        args: ['--no-sandbox', '--disable-setuid-sandbox']
    });
    
    const newPage = await browserInstance.newPage();
    
    await browserInstance.close();
})();

The rendered HTML appears empty when I check it through SEO testing tools. Has anyone successfully implemented Puppeteer-based prerendering with AngularJS? What might be causing this blank page issue?

2

you’re missing the page navigation and content extraction! you need await newPage.goto('your-url') and await newPage.content() to grab the html. angular 1.4 takes time to render, so add a delay or wait for specific elements before extracting content.

3

Had this exact issue migrating an old AngularJS app to SSR. Your code’s missing the key parts - you’re not navigating anywhere or waiting for content to load before closing the browser. Angular 1.4 takes time to bootstrap and render the DOM. You’ve got to wait for the digest cycle to finish before capturing HTML. I fixed it by adding waitForSelector or waitForFunction to make sure Angular finished rendering. Also check if your app has AJAX calls loading data - those need to complete before the page is ‘ready’ for rendering. I ended up implementing a custom ready state indicator in the Angular app that Puppeteer could monitor.

4

You’re getting a blank page because Angular 1.4 hasn’t finished loading when Puppeteer grabs the content. I’ve hit this same issue with legacy AngularJS apps - the framework needs time to initialize, compile templates, and bind data before anything shows up in the DOM. Your code’s closing the browser right away without letting Angular render. Besides the missing navigation others mentioned, you need a proper wait strategy. I’ve had good luck using waitForFunction to check if Angular’s $rootScope is defined, or waiting for specific DOM elements that show your app loaded. You can also listen for Angular’s digest cycle to complete. Some devs inject a global flag that gets set when Angular finishes its initial render, then have Puppeteer wait for that flag before extracting the HTML.