How to properly package Electron + Angular-cli 9?

167 Views Asked by At

My question is because I have been seeing how to do it for a long time and the first few times it worked, but lately I have had many problems.

I have seen several Blogs on how to link Electron with Angular but it always happens to me that I have errors with the main.js in the loadURL

const { app, BrowserWindow } = require('electron');
const url = require("url");
const path = require("path");

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        title: 'frontend',
        backgroundColor: '#ffffff',
        webPreferences: {
            nodeIntegration: true
        }
    });


    mainWindow.maximize();
    mainWindow.webContents.openDevTools();

    mainWindow.loadURL(
        url.format({
            pathname: path.join(__dirname, `/dist/index.html`),
            protocol: "file:",
            slashes: true
        })
    );

    mainWindow.on('closed', function () {
        mainWindow = null
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit();
})

app.on('activate', function () {
    if (mainWindow === null) createWindow();
})

I have already made the changes that videos and pages usually say about this as

Editing the package.json with "main": "main.js",

Put the dot in <base href ="./">

In angular.json projects> appName> architect> build> options> outputPath change it to "outputPath":"dist", without the project title

All of the above works until the time of packaging.

For what several mention using "electron-packager":"^14.2.1",

From a simpler command like

    "packager": "electron-packager. --platform = win32 --out dist / --overwrite"

Where first of all, it generates an error with pathname: path.join (__ dirname, 'dist / index.html'), because it locates it somewhere else and I have to change dist / for src /

What the exe generates but at the moment of starting only the <app-root> </app-root> tag appears without the angular scripts, that is, an empty page

And others post to create the package.json script like:

"electron-package": "ng build --prod && electron-packager. --no-prune --ignore=/node_modules --ignore=/e2e --ignore=/src --overwrite"

or

"electron-package": "ng build --prod --base-href ./ && electron-packager. --no-prune --ignore=/e2e --ignore=/src --overwrite"

That the latter I think does not generate the index.html: c

Does anyone know a Definitive process with Anglar-cli and Electron?

0

There are 0 best solutions below