如何解决Angular路由在Electron应用中不渲染、运行空白的问题

• Angular 默认的 PathLocationStrategy 基于 History API 实现，在 Electron 加载本地 file:// 协议资源时，无服务端路由兜底，路由匹配逻辑完全失效，导致 <router-outlet> 无内容渲染
• 手动拼接本地文件加载路径的写法在 Windows 环境下易生成格式不兼容的 file 协议地址，导致 index.html 加载失败、界面空白
• 旧版 BrowserWindow 安全配置与新版本 Electron 资源加载策略不匹配，存在静态资源被拦截的风险

• 修改 Angular 路由策略，兼容本地 file 协议加载
  找到项目路由根模块配置文件 app-routing.module.ts，在 RouterModule.forRoot() 参数中启用 hash 路由策略：

  // 原有配置
  RouterModule.forRoot(routes)
  // 适配后的配置
  RouterModule.forRoot(routes, { useHash: true })
  

  该配置会让路由逻辑基于 URL 哈希片段做匹配，完全不依赖服务端路径解析，可直接在本地 file 协议环境下正常工作。

• 修正 Angular 构建的静态资源路径
  确保打包生成的静态资源使用相对路径，避免绝对路径加载失败：

  • 构建时执行命令：ng build --base-href ./
  • 或修改 angular.json 中 build 配置项的 baseHref 字段值为 "./"
    注意：手动修改源码目录下 index.html 的 base 标签无效，构建流程会被 angular-cli 自动覆盖为配置项定义的值。

• 修正 Electron 主进程的窗口加载逻辑
  替换手动拼接 file URL 的写法，使用 Electron 原生提供的 loadFile 方法自动处理跨平台路径格式，同时调整 webPreferences 配置适配新版本安全策略，可直接替换使用的完整 main.js 代码如下：

  const { app, BrowserWindow } = require('electron')
  const path = require('path')
  
  let mainWindow
  
  function createWindow() {
    mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        contextIsolation: true,
        nodeIntegration: false,
        enableRemoteModule: false
      }
    })
  
    // 直接加载dist目录下的index.html，无需手动拼接协议与斜杠
    mainWindow.loadFile(path.join(__dirname, 'dist/index.html'))
  }
  
  app.on('ready', createWindow)
  
  app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
  })
  
  app.on('activate', function () {
    if (mainWindow === null) createWindow()
  })
  

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