如何在Puppeteer中无全页重载导航Angular路由

我太懂你这种困扰了——用page.goto()每次都触发全页重载，完全浪费了Angular客户端路由的优势；靠点击routerLink虽然能行，但万一页面上没对应的链接，或者需要动态导航到某个路由，这种方法就不太灵活了。下面给你几个直接调用Angular路由系统的方案，完美解决这个问题：

方法一：直接通过Puppeteer执行Angular的Router.navigate() #

这是最直接的方案，利用Puppeteer的page.evaluate()在浏览器上下文里直接调用Angular的Router实例。Angular的Router是全局可访问的（只要你能拿到注入器），代码示例如下：

// 等待Angular应用完全初始化，确保Router可用
await page.waitForFunction(() => {
  // 检查Angular是否已挂载到根元素，可根据你的实际情况调整判断条件
  return window.ng?.getComponent(document.body) !== undefined;
});

// 执行路由导航，传入目标路由路径
await page.evaluate((routePath) => {
  // 获取Angular根组件的注入器
  const rootComponent = window.ng.getComponent(document.body);
  const router = rootComponent.injector.get(window.ng.coreTokens.Router);
  // 调用Router.navigate完成无重载导航
  return router.navigate([routePath]);
}, '/about');

如果你的Angular版本较新，或者根注入器的获取方式有变化，也可以试试这种方式：

await page.evaluate((routePath) => {
  // 从Angular应用实例中获取根组件
  const appRef = window.ng.getApplicationRef();
  const rootComponent = appRef.components[0];
  const router = rootComponent.injector.get(window.ng.coreTokens.Router);
  return router.navigate([routePath]);
}, '/home');

方法二：模拟路由状态变化（简化场景用） #

如果上面的注入器获取遇到问题，你还可以直接修改浏览器的history状态并触发路由事件——不过要注意，这种方法不会触发Angular的路由守卫（比如CanActivate）或组件生命周期钩子，只适合简单的导航场景：

await page.evaluate((routePath) => {
  // 更新浏览器历史记录
  window.history.pushState({}, '', routePath);
  // 触发popstate事件，让Angular Router感知到路由变化
  window.dispatchEvent(new PopStateEvent('popstate'));
}, '/contact');

实用小提示 #

• 务必等Angular应用完全初始化后再执行导航操作，否则会拿不到Router实例。你可以通过等待根组件的DOM元素出现，或者用page.waitForFunction()检查Router是否可用。
• 就算是懒加载模块，这些方法也能正常工作，因为Angular Router会自动处理懒加载模块的加载，不会触发全页重载。
• 对比点击routerLink的方法，直接调用Router.navigate()完全不依赖页面上的DOM元素，不管是动态生成路由还是页面没有对应链接的场景都能轻松应对。

备注：内容来源于stack exchange，提问作者GeoDev