I’ve this problem: I wanted to create a desktop app with a executable file, but i can’t do it right, whatever i try. I successfully created the executable with electron-packager, i builted the app into the dist folder with those four minimized files (main, styles, runtime and polyfills) and the index.html, but when I run the executable the only thing I see is white screen.
I was thinking about two ways of handling this:
- starting the app on localhost:4200 in… some way, exactly when I run the executable, but I don’t know how to do it
- reading those files in the dist folder, but i keep getting errors that say “to load resource: net::ERR_FILE_NOT_FOUND” at row 1 of each file
I’ll leave here the three files that I believe are most important in this problem.
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"library-frontend": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/library-frontend",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "3MB",
"maximumError": "5MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "library-frontend:build:production"
},
"development": {
"browserTarget": "library-frontend:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "library-frontend:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
]
}
}
}
}
}
}
package.json
{
"name": "library-frontend",
"version": "1.0.4",
"main": "electron.main.js",
"scripts": {
"ng": "ng",
"serve": "ng serve",
"start": "concurrently "ng serve" "npm run electron"",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"electron": "electron ./electron.main",
"electron-build": "ng build && electron ./electron.main",
"electron-win": "electron-packager . --platform=win32"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.0.0 || ^17.0.0",
"@angular/cdk": "^16.0.1",
"@angular/common": "^16.0.2",
"@angular/compiler": "^16.0.2",
"@angular/forms": "^16.0.2",
"@angular/material": "^16.0.1",
"@angular/material-moment-adapter": "^16.0.1",
"@angular/platform-browser": "^16.0.2",
"@angular/platform-browser-dynamic": "^16.0.2",
"@angular/router": "^16.0.2",
"node-windows": "^1.0.0-beta.8",
"rxjs": "~7.8.0",
"tslib": "^2.5.1",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.0.2",
"@angular/cli": "~16.0.0",
"@angular/compiler-cli": "^16.0.2",
"@types/jasmine": "~4.3.0",
"@types/jquery": "^3.5.16",
"@types/node": "^12.11.1",
"concurrently": "^8.0.1",
"electron": "^24.0.0",
"electron-packager": "^17.1.1",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~4.9.4"
}
}
electron.main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
let win;
const createWindow = () => {
setTimeout(() => {
win = new BrowserWindow({
width: 800,
height: 600,
icon: './src/favicon.ico'
});
const appUrl = url.pathToFileURL(path.join(__dirname, 'dist/library-frontend/index.html')).toString();
win.loadURL(appUrl);
win.on('closed', () => {
win = null;
});
}, 10000);
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
These files are all in the root of the project, the same level as src folder, which contains index.html and all other components.
The first solution I wrote before is probably wrong, but what I want is exactly what happens when I run my “npm run start” command, which runs concurrently ng serve and npm run electron
