Angular Electron应用修改文件保存后刷新出现空白屏问题

问题根源 #

刷新（自动重载或手动重载）时，Electron会基于当前页面的路由路径（比如/library/(grid/0//sidebar:libar)）请求静态资源，导致资源路径变成http://localhost:4200/library/(grid/0//sidebar:libar/styles.css)这类错误地址，而正确的资源路径应该是根路径下的http://localhost:4200/styles.css。

解决方案 #

方案1：重载时强制跳转到默认路由 #

如果不需要保留当前路由，重载时直接回到根路径即可：

• 修改Electron菜单的重载逻辑：
  在main.ts的菜单配置中，替换默认的reload角色为自定义点击事件，直接加载根URL：

  import { Menu, BrowserWindow } from 'electron';
  
  function createMenu(mainWindow: BrowserWindow) {
    const template = [
      {
        label: '视图',
        submenu: [
          { 
            label: '重载',
            click: () => {
              mainWindow.loadURL('http://localhost:4200'); // 直接加载根路径
            }
          },
          { role: 'toggleDevTools' }
        ]
      }
    ];
    const menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
  }
  

• 修改electron-reload的自动重载逻辑：
  替换默认的自动重载为重新加载根URL，避免基于当前路由刷新：

  import * as electronReload from 'electron-reload';
  import { app, BrowserWindow } from 'electron';
  import * as path from 'path';
  
  let mainWindow: BrowserWindow | null;
  
  electronReload(__dirname, {
    electron: path.join(__dirname, 'node_modules', '.bin', 'electron'),
    awaitWriteFinish: true,
    callback: () => {
      if (mainWindow) {
        mainWindow.loadURL('http://localhost:4200');
      }
    }
  });
  

方案2：配置Angular资源路径为绝对路径（保留当前路由） #

如果需要刷新后保留当前路由，修改Angular的配置确保资源始终从根路径加载：

1. 修改index.html的base标签：
   确保base href设置为根路径：

   <base href="/">
   

2. 配置angular.json的deployUrl：
   在项目的angular.json中，给build选项添加deployUrl为根路径：

   "projects": {
     "your-project-name": {
       "architect": {
         "build": {
           "options": {
             "deployUrl": "/",
             // 其他现有配置...
           }
         }
       }
     }
   }
   

   这样Angular会把所有静态资源的引用路径设置为绝对根路径，即使当前路由是深层路径，资源请求也会指向http://localhost:4200/styles.css这类正确地址。

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