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?
Related
I followed the suggestions in the answers of related questions, i.e. specifying
webPreferences: {
plugins: true
}
as part of the options when creating the BrowserWindow instance, but it is simply not working. Whenever I try to load/open/view a PDF file in electron, all I get is what looks like an empty/broken chromium PDF viewer like on this screenshot:
My electron version is "^13.1.2" according to my package.json and this is my main.js
// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
plugins: true
}
});
// and load the index.html of the app.
win.loadFile('test.pdf');
}
app.whenReady().then(() => {
createWindow()
})
app.on('window-all-closed', function () {
app.quit()
})
Can anyone tell me what I'm doing wrong?
An upgrade of electron helped me. i switched from 13.x to 16.x and it works now
Use PDFWindow package
`//main.js
app.on('ready', () => {
const win = new PDFWindow({
width: 800,
height: 600
})
win.loadURL('test.pdf')
})
//package.json
"dependencies": {
"electron-pdf-window": "^1.0.12",
},
`
I'm trying to load React and Redux dev tools in electron, so far Redux was loaded successfully, but React was not. I didn't see the React tab in Developer Tools. Here is my code:
main.js
const electron = require("electron");
const path = require("path");
const url = require("url");
const os = require("os");
const { app, BrowserWindow } = electron;
let win;
const installExtensions = async () => {
const ses = win.webContents.session;
// react dev tools
ses.loadExtension(
path.join(
os.homedir(),
".config/google-chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0"
)
);
// redux dev tools
ses.loadExtension(
path.join(
os.homedir(),
".config/google-chrome/Default/Extensions/lmhkpmbekcpmknklioeibfkpmmfibljd/2.17.0_0"
)
);
};
const createWindow = async () => {
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
},
});
win.maximize();
await installExtensions();
win.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file:",
slashes: true,
})
);
win.webContents.once("dom-ready", () => {
win.webContents.openDevTools();
});
win.on("closed", () => {
win = null;
});
};
app.on("ready", createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (win === null) {
createWindow();
}
});
package.json
{
"name": "electron-react-typescript",
"version": "0.0.7",
"description": "",
"main": "/main.js",
"scripts": {
"start": "electron main.js"
},
"dependencies": {
"electron": "^10.1.5",
"electron-builder": "^22.9.1"
}
}
I started the program using yarn start, here is the output:
yarn run v1.22.10
warning package.json: No license field
$ electron main.js
(node:8189) ExtensionLoadWarning: Warnings loading extension at /home/searene/.config/google-chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'minimum_chrome_version'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
(node:8189) ExtensionLoadWarning: Warnings loading extension at /home/searene/.config/google-chrome/Default/Extensions/lmhkpmbekcpmknklioeibfkpmmfibljd/2.17.0_0: Unrecognized manifest key 'commands'. Unrecognized manifest key 'homepage_url'. Unrecognized manifest key 'page_action'. Unrecognized manifest key 'short_name'. Unrecognized manifest key 'update_url'. Permission 'notifications' is unknown or URL pattern is malformed. Permission 'contextMenus' is unknown or URL pattern is malformed. Permission 'tabs' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
I saw Redux in the developer tools, but I didn't find React. According to this github issue, the above warnings shouldn't block the loading of dev tools. I also tried re-opening dev-tools, no luck. How to solve it?
under webPreferences add
contextIsolation: false
for the loadExtension function add { allowFileAccess: true } as a 2nd argument.
That should make it work, as they changed the default of contextIsolation to be true in some version (I think 9.0.0),
and added allowFileAccess as an extention loading option for security.
You can make an isDev boolean to use for setting the allowFileAccess if needs be.
I have just finished working on a test project in electron. The problem is that when I package the app using an electron-packager into an executable, my main.html file does not load up in the window.
However, when I run with npm start it works absolutely fine. I have checked if there is any mistake in the path to my files but that's absolutely fine as well.
Here's my package.json file -
{
"name": "test",
"version": "1.0.0",
"description": "Just a test app",
"main": "src/main.js",
"scripts": {
"start": "electron ."
},
"author": "Ray",
"license": "MIT",
"devDependencies": {
"electron": "^9.0.5"
},
"dependencies": {
"electron-packager": "^15.0.0"
}
}
Here is my main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
win.loadFile('./app/main.html')
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
Any help will be appreciated. Thanks.
First of all electron-packagershould be part of devDependencies, not dependencies.
Second: How do you pack? If you use an asar File you need to look at the Paths. Those change when packing. So I'd recommend you use something like
win.loadURL(`file://${__dirname}/main.html`)
or
win.loadURL(url.format({
pathname: path.join(__dirname, 'main.html'),
protocol: 'file:',
slashes: true
}));
when loading your html.
I have developed an app in angular 6. I am trying to make .exe build using electron. When I am making an electron build in the dev environment which is working fine but now I want to release a package for windows I have installed electron packager on my machine trying to make a build for windows. I have installed wine on Linux machine to run the build. It is making the build of the app but when I run .exe file it displays me an empty window. I don't understand what the issue is & why it is displaying me an empty screen.
// main.ts
const { app, BrowserWindow } = require('electron')
const path = require('path');
let win;
function createWindow () {
win = new BrowserWindow({
width: 600,
height: 600,
backgroundColor: '#ffffff'
})
win.maximize()
win.loadURL(`file://${__dirname}/dist/task-reporting-tool/index.html`)
win.on('closed', function () {
win = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (win === null) {
createWindow()
}
})
// package.json
"main": "main.js",
"description": "task-reporting-tool",
"files": [ "build", "*.js", "public"],
"scripts": {
"electron": "electron .",
"electron-build": "ng build --prod && electron .",
"packager": "electron-packager . WinApp --platform=win32 --arch=all"
}
index.html
<base href="./">
I have created a main.js file. done changes in the index.html file & in package.json.
Using npm run packager to make a build. All the required changes are done build successful but displays an empty screen.
Install npm and then try:
electron-packager . --asar
electron-packager . --all
You could try :
win.loadURL(
url.format({
pathname: path.join(__dirname, "/dist/angular-electron/index.html"),
protocol: "file:",
slashes: true
})
);
Electron freezes when node-opcua is required in index.html and a process called Electron Helper takes up 100% of the cpu.
I have encountered the problem on macOS 10.14.2, but a friend tested in Windows 10 and that worked.
From package.json
"devDependencies": {
"electron": "^4.0.4"
},
"dependencies": {
"node-opcua": "^0.5.6"
}
Main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
// Create the browser window.
win = new BrowserWindow({ width: 800, height: 600 })
// and load the index.html of the app.
win.loadFile('index.html')
win.webContents.openDevTools()
}
app.on('ready', createWindow)
Index.html
<script>
// Does not work
const opcua = require('node-opcua')
console.log(opcua)
// Works
// const fs = require('fs')
// console.log(fs)
</script>
When running the simple code it should just print the opcua object in the console. But the complete electorn process freezes.
Solved it by updating node-opcua to 2.1.9 and electron to 6.0.11