javascriptangulartypescriptelectron

Open Angular component in new window with Electron


I'm working on an Angular app (version 18). I'm packing it with Electron and I need to open an app component in a new window.

This is my main.js file:

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();
    });
}

The app starts correctly with Electron using command ng build && electron . and the main window works fine. However, when I click on the button which navigates to another component (the one I need to open in a new window), the new window opens but it's empty.

Looking in my dist folder, I see there are compiled files (dist/my-app/browser) and index.html. There are no files related to the parameter component I want to load (I don't know if that's correct or not).

Any help is much appreciated.


Solution

  • For anyone wondering, I gave up with Electron.

    At the end I made I simple WPF desktop app with C# with a WebView in it. So much more flexible and much more less work required to get it working properly. Probably this is not the right solution for everyone, but since I needed to run it only on desktop Windows environment, for me this was perfect.