Electron+Angular项目用electron-builder打包后加载本地资源失败求助

Hey, I’ve battled this exact error a few times when wrapping Angular apps with Electron and electron-builder—total headache when everything works locally but breaks post-packaging. Let’s walk through the most common fixes that got my apps running smoothly:

1. Align Angular’s Build Output with electron-builder’s Paths #

First, double-check where Angular dumps your built files. By default, Angular uses dist/your-app-name as the output path. If electron-builder is looking for files directly in dist/, it’ll miss them entirely.

• Option 1: Adjust Angular’s output path
  Open angular.json, find your project’s architect.build.options.outputPath, and set it to just "dist" instead of "dist/your-app-name".

• Option 2: Update electron-builder’s file config
  In your package.json, make sure the build.files array explicitly targets the correct subdirectory in dist:

  "build": {
    "appId": "com.your.app.id",
    "files": [
      "dist/your-app-name/**/*", // Match your Angular output subfolder
      "main.js",
      "preload.js",
      "package.json"
    ],
    "directories": {
      "output": "release"
    }
  }
  

2. Fix Angular’s Base Href #

Angular defaults to a base href of /, which works fine for local dev but breaks when loading local files post-packaging. You need to set it to a relative path:

• Build with the correct flag
  Run your Angular build command with:

  ng build --prod --base-href ./
  

• Or set it permanently in angular.json
  Add "baseHref": "./" to your project’s architect.build.configurations.prod section.

3. Verify Your Electron Main Script’s Load Path #

The way you load your index.html changes between dev and production. Use electron-is-dev to handle both cases, and always use path.join() to avoid messy relative path issues:

const { app, BrowserWindow } = require('electron');
const path = require('path');
const isDev = require('electron-is-dev');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') // Don’t forget this path too!
    }
  });

  if (isDev) {
    mainWindow.loadURL('http://localhost:4200'); // Load dev server
  } else {
    // Adjust this path to match where your index.html lives in the packaged app
    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
    // If you kept Angular’s default output path, it would be:
    // mainWindow.loadFile(path.join(__dirname, '../dist/your-app-name/index.html'));
  }
}

Remember: When packaged, __dirname points to the folder containing your main.js (usually resources/app inside the packaged app), so your path to index.html needs to traverse up one level to reach the dist folder.

4. Make Sure electron-builder Isn’t Ignoring dist/ #

If your .gitignore includes dist/, electron-builder might skip packaging those files unless you explicitly tell it otherwise. The build.files array in package.json overrides .gitignore, so as long as you included "dist/**/*" (or the specific subfolder), you’re covered.

Start with these steps—9 times out of 10, it’s a path mismatch between Angular’s build output, electron-builder’s config, or your main script’s load path.

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