使用 Electron 在新窗口中打开 Angular 组件

Question

我正在开发 Angular 应用程序（版本 18）。我正在用 Electron 打包它，我需要在新窗口中打开一个应用程序组件。

这是我的 main.js 文件：

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
let mainWindow;

// Function to create the main window.
async function createWindow() {
    // Define our main window size
    mainWindow = new BrowserWindow({
        width: 1250,
        height: 800,
        frame: true,
        webPreferences: {
            nodeIntegration: false,
            enableRemoteModule: true,
            contextIsolation: true,
            preload: path.join(__dirname, 'preload.js')
        },
    })
    mainWindow.loadFile('./dist/my-app/browser/index.html');
}

app.whenReady().then(()=>{
    createWindow();
});



// Function to create the parameters window (child window).
function createParametersWindow() {
    let newWindow = new BrowserWindow({
        width: 400,
        height: 300,
        webPreferences: {
            contextIsolation: false,
            nodeIntegration: false,
            preload: path.join(__dirname, 'preload.js'),
        },
        show: false,
    });

    console.log("Creating parameters window");

    newWindow.loadURL('./src/app/parameters/parameters-index/parameters-index.html');
    
    newWindow.on('closed', () => {
        newWindow = null;
    });

    newWindow.webContents.on('did-finish-load', () => {
        newWindow.show();
    });
}

应用程序使用命令

ng build && electron .

使用 Electron 正确启动，并且主窗口工作正常。但是，当我单击导航到另一个组件（我需要在新窗口中打开的组件）的按钮时，新窗口会打开，但它是空的。

查看我的 dist 文件夹，我看到有编译文件（dist/my-app/browser）和index.html。没有与我要加载的参数组件相关的文件（不知道是否正确）。

非常感谢任何帮助。

Answer 1

对于任何想知道的人，我放弃了 Electron。

最后我用 C# 制作了一个简单的 WPF 桌面应用程序，其中包含 WebView。使其正常工作所需的工作更加灵活、工作量也更少。也许这不是适合每个人的解决方案，但由于我只需要在桌面 Windows 环境中运行它，所以对我来说这是完美的。