Angular+Electron中动态切换项目静态资源路径的实现方法

一、动态告知Angular当前项目静态文件位置 #

angular.json仅支持编译时的静态资源配置，无法动态修改运行时路径，你可以通过以下两种方式实现动态传递：

1. 利用Electron的contextBridge暴露路径到渲染进程 #

在Electron主进程中监听项目切换事件，获取当前项目的静态文件路径，通过contextBridge将路径暴露给Angular所在的渲染进程：

// Electron主进程 main.js
const { contextBridge, ipcMain } = require('electron');

// 监听项目切换事件，接收新的静态文件路径
ipcMain.on('project-switched', (event, staticPath) => {
  contextBridge.exposeInMainWorld('electronStaticPath', {
    getCurrentPath: () => staticPath
  });
});

在Angular中创建服务读取这个全局变量，供ThreeJS调用：

// Angular项目 static-path.service.ts
import { Injectable } from '@angular/core';

declare global {
  interface Window {
    electronStaticPath: {
      getCurrentPath: () => string;
    };
  }
}

@Injectable({ providedIn: 'root' })
export class StaticPathService {
  getCurrentStaticPath(): string {
    return window.electronStaticPath.getCurrentPath();
  }
}

后续ThreeJS加载文件时，即可通过该服务获取路径并拼接成完整资源地址。

2. 使用APP_INITIALIZER提前加载配置 #

如果需要在Angular启动阶段就获取路径，可借助APP_INITIALIZER完成初始化：

// Angular项目 app.module.ts
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { StaticPathService } from './static-path.service';

export function initializeStaticPath(staticPathService: StaticPathService) {
  return () => Promise.resolve(staticPathService.getCurrentStaticPath());
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeStaticPath,
      deps: [StaticPathService],
      multi: true
    }
  ]
})
export class AppModule {}

二、无需自建HTTP服务器实现文件加载 #

Electron自带的protocol模块可将本地文件系统路径映射为类HTTP请求地址，无需自行搭建服务器：

1. 注册自定义协议 #

在Electron主进程中注册自定义协议（如app://），当渲染进程发起该协议的请求时，自动映射到用户项目的静态文件路径：

// Electron主进程 main.js
const { protocol } = require('electron');
const path = require('path');

// 假设通过全局变量存储当前项目的静态文件根路径
global.currentProjectStaticPath = '';

// 监听项目切换事件，更新全局路径
ipcMain.on('project-switched', (event, staticPath) => {
  global.currentProjectStaticPath = staticPath;
});

// 注册自定义协议
protocol.registerFileProtocol('app', (request, callback) => {
  // 移除协议头，解析请求的相对路径
  const url = request.url.replace('app:///', '');
  // 拼接成完整的本地文件路径
  const filePath = path.join(global.currentProjectStaticPath, url);
  // 返回对应文件
  callback({ path: filePath });
});

2. 在ThreeJS中使用自定义协议加载文件 #

通过Angular服务确认路径后，将ThreeJS的资源路径前缀替换为自定义协议即可：

// 示例：ThreeJS加载GLTF模型
import { StaticPathService } from './static-path.service';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

constructor(private staticPathService: StaticPathService) {}

load3DModel() {
  const loader = new GLTFLoader();
  // 用自定义协议拼接资源路径
  const modelUrl = `app:///models/character.gltf`;
  loader.load(modelUrl, (gltf) => {
    // 处理加载完成的模型
    scene.add(gltf.scene);
  });
}

此时ThreeJS发起的app://请求会被Electron自动转发到对应的本地文件路径，全程无需自建HTTP服务器。

内容的提问来源于stack exchange，提问作者Get Off My Lawn