Angular 1.4使用Google Puppeteer预渲染（SSR）出现空白页问题

嘿，我一眼就看出你代码里的核心问题啦——你只是启动了浏览器、新建了页面，根本没加载你的Angular站点，也没等页面渲染完成就直接关掉浏览器了，这肯定会显示空白页呀！

你的代码存在的关键问题 #

• 没有导航到你的Angular 1.4项目页面，Puppeteer根本不知道要渲染什么内容
• 缺少等待Angular SPA渲染完成的逻辑（Angular是客户端渲染框架，需要等它完成数据绑定和DOM渲染）
• 没有获取渲染后的HTML内容，也没有做任何预渲染的输出操作
• 浏览器启动后立即关闭，完全没给渲染留时间

修正后的预渲染代码 #

下面是完整的可运行代码，我给你加上了所有必要的步骤：

(async() => {
  // 正确导入Puppeteer
  const puppeteer = require('puppeteer');
  const fs = require('fs'); // 用于保存预渲染后的HTML

  // 启动Chrome浏览器
  const browser = await puppeteer.launch({ 
    executablePath: '/usr/bin/google-chrome', 
    args: ['--no-sandbox', '--disable-setuid-sandbox'] 
  });
  const page = await browser.newPage();
  
  // 导航到你的Angular 1.4站点，替换成你实际的URL
  await page.goto('https://your-angular-project-url.com', {
    waitUntil: 'networkidle2' // 等待网络请求基本完成，减少异步干扰
  });

  // 等待Angular 1.4完成渲染：判断Angular的消化循环结束
  await page.waitForFunction(() => {
    // 确保window.angular存在，且当前没有$digest/$apply在执行
    return window.angular && !window.angular.element(document).scope().$$phase;
  });

  // 可选：如果页面有依赖异步数据的元素，也可以等待特定元素出现
  // await page.waitForSelector('#your-dynamic-element-id');

  // 获取完全渲染后的HTML内容
  const renderedHtml = await page.content();
  
  // 将预渲染的HTML保存到本地文件（你也可以直接返回给客户端）
  fs.writeFileSync('prerendered-angular-page.html', renderedHtml);

  console.log('预渲染完成！已生成渲染后的HTML文件');
  
  // 最后关闭浏览器
  await browser.close();
})();

额外排查建议 #

如果还是出现空白页，可以试试这些方法：

• 先在本地Chrome浏览器打开你的Angular站点，确认页面能正常渲染（排除站点本身的问题）
• 检查服务器环境中的Chrome版本是否和Puppeteer兼容（版本不匹配可能导致渲染异常）
• 如果页面有大量异步请求，可延长等待时间，比如添加await page.waitForTimeout(2000)（但优先用条件等待，避免固定延时的不确定性）
• 开启Puppeteer的headless: false模式，可视化查看渲染过程，方便定位问题：

  const browser = await puppeteer.launch({ 
    executablePath: '/usr/bin/google-chrome', 
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
    headless: false // 显示Chrome窗口，查看渲染情况
  });
  

内容的提问来源于stack exchange，提问作者Alnoor Khan