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.

Continue reading...