Trouble with Angular SSR using Puppeteer

Other Questions Puppeteer
1

I’m trying to set up server-side rendering for my Angular 1.4 app using Puppeteer. But when I check the rendered page, it’s blank. I’m not sure what I’m doing wrong.

Here’s the code I’m using:

async function renderPage() {
  const Headless = require('puppeteer');
  const browser = await Headless.launch({
    execPath: '/usr/local/bin/chromium',
    launchOptions: ['--no-sandbox', '--headless']
  });
  const tab = await browser.newPage();
  
  // TODO: Add actual rendering logic here
  
  await browser.close();
}

renderPage();

Can anyone spot what might be causing the issue? Or suggest a better approach for Angular 1.4 SSR? Thanks!

2

I’ve worked extensively with Angular SSR, and your approach using Puppeteer is on the right track. However, there are a few crucial steps missing in your code. First, you need to navigate to your app’s URL using await tab.goto('http://your-app-url'). Then, wait for the content to load fully with await tab.waitForSelector('selector-for-main-content'). Finally, extract the rendered HTML with const html = await tab.content(). Remember to handle errors and set a reasonable timeout. For Angular 1.4, you might also consider using Prerender.io as an alternative solution if Puppeteer proves challenging.

3

hey there flyingleaf! i ran into similar issues with angular ssr. make sure youre actually navigating to your apps url with tab.goto() before trying to render. also, you might wanna add a wait for network idle or specific element to load. good luck!

4

I’ve tackled Angular SSR challenges before, and your Puppeteer approach is a solid start. One key thing you’re missing is actually loading your app’s content. Try adding:

await tab.goto('http://your-app-url', {waitUntil: 'networkidle0'});
await tab.waitForTimeout(5000); // Give Angular time to render
const html = await tab.content();
console.log(html); // Check if content is there

This ensures your app loads and Angular has time to render. If it’s still blank, you might need to troubleshoot your Angular app’s initialization. Also, consider using Angular Universal for SSR if possible - it’s designed specifically for Angular and can be more reliable than Puppeteer for this use case.