Electron app shows blank screen when built with electron-builder - electron

As the title explains, i have a simple Electron app that loads a html page when started. Everything works fine, but if i try to build the project using electron-builder (yarn dist), the application shows nothing but a blank screen. Any idea of why this happens?
My project structure is the following:
-- e2e
-- dist
-- node_modules
-- src
-- app
-- assets
-- environments
-- index.html
-- editor.config
-- angular.json
-- broswerlist
-- karma.conf.js
-- main.js
-- package.json
-- package-lock.json
-- tsconfig.json
-- tslint.json
I also post my main.js and package.json files:
main.js
const electron = require("electron")
const {app, Menu, BrowserWindow} = require("electron")
const path = require("path")
let mainWindow
app.on('window-all-closed', e => e.preventDefault() )
app.on('ready', createWindow);
function createWindow() {
mainWindow = new BrowserWindow({
width:1380,
frame:false,
closable: false,
minimizable: false,
maximizable: false,
resizable: false,
autoHideMenuBar: true,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.webContents.openDevTools();
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'dist/index.html'),
protocol: "file",
slashes: "true"
}))
}
package.json
{
"name": "test_app",
"version": "1.0.0",
"description": "test",
"author": "me",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"electron": "electron .",
"dist": "electron-builder",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"devDependencies": {
"electron": "7.1.8",
"electron-builder": "^22.2.0"
},
"build": {
"target": [
"nsis"
]
},
"dependencies": {
"msal-electron-poc": "^0.1.0",
"#angular-devkit/build-angular": "~0.803.21",
"#angular/animations": "~8.2.14",
"#angular/cli": "~8.3.21",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/compiler-cli": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"fs": "0.0.1-security",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"rxjs": "~6.4.0",
"ts-node": "~7.0.0",
"tslib": "^1.10.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3",
"zone.js": "~0.9.1"
}
}

//Replace
path.join(__dirname, 'dist/index.html')
//with
path.join(__dirname, 'src/index.html')

Had same problem. And was able to run electron on windows by running.
for windows:
vue-cli-service electron:build --mode development --windows
for Linux:
vue-cli-service electron:build --mode development --rpm
And check if there are some hidden errors or it just work after.

Related

IOS App Crashes in simulator after updating Nativescript from 6.5.1 to 8.2

I migrated my nativescript application from 6.5.1 to 8.2 locally, my project is building fine when I do "tns run ios" ,it installs the app on the simulator but it crashes and shuts down when its opened . I am unable to figure out where the issue is and am stuck here and unable to move forward, please let me know how to fix this or what i am missing?
package.json
{
"license": "SEE LICENSE IN <your-license-filename>",
"repository": "<fill-your-repository-here>",
"dependencies": {
"#angular/animations": "~13.2.0",
"#angular/common": "~13.2.0",
"#angular/compiler": "~13.2.0",
"#angular/core": "~13.2.0",
"#angular/forms": "~13.2.0",
"#angular/http": "8.0.0-beta.10",
"#angular/platform-browser": "~13.2.0",
"#angular/platform-browser-dynamic": "~13.2.0",
"#angular/router": "~13.2.0",
"base-64": "^0.1.0",
"cross-env": "^5.2.0",
"lodash": "^4.17.11",
"nativescript-appversion": "1.4.4",
"#nativescript/camera": "5.0.10",
"nativescript-couchbase": "1.0.18",
"#nativescript/email": "2.0.5",
"#nativescript/geolocation": "8.0.2",
"nativescript-orientation": "2.2.5",
"nativescript-phone": "3.0.3",
"nativescript-screen-orientation": "2.0.0",
"nativescript-theme-core": "~1.0.4",
"reflect-metadata": "~0.1.13",
"rxjs": "~7.5.0",
"rxjs-compat": "^6.4.0",
"utf8": "^3.0.0",
"zone.js": "~0.11.5",
"#nativescript/core": "~8.2.0",
"#nativescript/angular": "^13.0.0"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.2.0",
"#angular/compiler-cli": "~13.2.0",
"#nativescript/ios": "8.2.1",
"#nativescript/schematics": "~0.5.0",
"#nativescript/types": "~8.2.0",
"#nativescript/webpack": "5.0.6",
"#ngtools/webpack": "~13.2.0",
"typescript": "~4.5.5"
},
"readme": "NativeScript Application",
"main": "./src/main.ts"
}
tsconfig.json
{
"compilerOptions": {
"module": "esnext",
"target": "es2017",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmitHelpers": true,
"noEmitOnError": true,
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"lib": [
"dom",
"es2017"
],
"baseUrl": ".",
"paths": {
"~/*": ["src/*"],
"#/*": ["src/*"]
},
"moduleResolution": "node",
"removeComments": false
},
"include": [ "src/**/*.ios.ts"],
"files": ["./src/main.ts", "./reference.d.ts"],
"exclude": [
"node_modules",
"platforms"
]
}
webpackconfig.js
const webpack = require("#nativescript/webpack");
module.exports = (env) => {
webpack.init(env);
return webpack.resolveConfig();
};
i was missing this one in the main.ts
runNativeScriptAngularApp({
});
When i added it worked!
runNativeScriptAngularApp({
appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
});

Angular Material: material-nav generate does not working

I want to create a responsive side nav. I watched a video on youtube.
click here to see that video
After, I enter below command to the terminal
ng generate #angular/material:material-nav -name=nav
But it give an error as below,
Unknown option: '-e'
How to resolve that?
My Package.json as below,
{
"name": "euc",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/cdk": "~8.2.3",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"bootstrap": "^4.4.1",
"hammerjs": "^2.0.8",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.23",
"#angular/cli": "~8.3.23",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/node": "~8.9.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
Angular CLI flags start with a double dash.
ng generate #angular/material:material-nav --name=nav

Packaging app for platform win32 x64 taking too long using electron v5.0.6

I developped a web app with angular i need to package my web app using electron , it all seems fine until i run electron-packager , it takes forever , i dont know if it is supposed to be this slow or is there something wrong ?
ps : im on windows 7
this is my package.json
{
"name": "recherche-final",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build && electron .",
"pack": "electron-packager."
},
"private": true,
"dependencies": {
"#angular/animations": "^6.0.3",
"#angular/cdk": "^6.2.0",
"#angular/common": "^6.0.3",
"#angular/compiler": "^6.0.3",
"#angular/core": "^6.0.3",
"#angular/forms": "^6.0.3",
"#angular/http": "^6.0.3",
"#angular/material": "^6.4.2",
"#angular/platform-browser": "^6.0.3",
"#angular/platform-browser-dynamic": "^6.0.3",
"#angular/router": "^6.0.3",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.6.8",
"#angular/cli": "~6.0.8",
"#angular/compiler-cli": "^6.0.3",
"#angular/language-service": "^6.0.3",
"#types/jasmine": "~2.8.6",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"electron": "^5.0.6",
"electron-packager": "^14.0.1",
"electron-winstaller": "^3.0.4",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}
i expect my app.exe
I know this is a late answer but just in case it helps anybody else- Have you checked how you have packaged your app? Make sure that your package.json files for angular and Electron are different. You are probably packing all the angular node modules as well into the electron application which is not necessary.
https://medium.com/#hellobharadwaj/electron-plus-angular-react-why-use-2-different-package-json-files-361ae47d07f3

Why bootstrap not getting loaded properly at Angular CLI MVC based project

I dont know whay bootstrap is not loaded properly at angular CLI Typescript based ASP.NET MVC based project. Somehow, seems default CSS files are overriden or i dont know exactly about the problem and no idea how to figure it out. I almost tried all solutions available on stackoverflow.com
For example following Bootstrap snippet not showing panel headers.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
</div>
I just created Angular app via CLI and modified package.json within the app. I did not copied the whole content at root folder.
So my solution structure is :
Moreover, part of angular.json is :
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"assets": [
"src/favicon.ico",
"src/assets"
],
"index": "src/index.html",
"main": "src/main.ts",
"outputPath": "../wwwroot/dist",
"polyfills": "src/polyfills.ts",
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss"
"src/styles.scss"
],
"tsConfig": "src/tsconfig.app.json"
},
.............
and packages.json is :
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^7.1.3",
"#angular/cdk": "^7.1.1",
"#angular/common": "~7.1.0",
"#angular/compiler": "~7.1.0",
"#angular/core": "~7.1.0",
"#angular/forms": "~7.1.0",
"#angular/material": "^7.1.1",
"#angular/platform-browser": "~7.1.0",
"#angular/platform-browser-dynamic": "~7.1.0",
"#angular/router": "~7.1.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26",
"bootstrap": "4.1.3",
"jquery": "^3.3.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.11.0",
"#angular/cli": "~7.1.3",
"#angular/compiler-cli": "~7.1.0",
"#angular/language-service": "~7.1.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/jquery": "^3.3.27",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
Any body can let me know how to resolve this frustrating functioning error?
Since from what I can tell you don't even need the scss in your compile pipeline and you just need the css, change this;
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss"
"src/styles.scss"
],
to this;
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
"src/styles.scss"
],
...and ya should be good. Cheers.

Electron nsis Installer x 64 not including node_modules?

I have an electron app that runs very smoothly both in dev and prod envs.
I'm having issues with packaging a windows installer.
Here's what I'm doing.
$ npm install
-> Postinstall will take care of installing native production dependencies.
$ npm run prod-build
My output folder structure is :
--win-unpacked
--locales
-- resources
--app.asar.unpacked
--node_modules
**--node-datetime** ( no other node module is included)
--app
--electron
--elevate
...
--Some App Setup 1.0.0 .exe
Electron-builder generates an .exe file that I successfully install.
The app launches but nothing loads. Any idea where I should start?
Package.json
{
"name": "Some App",
"version": "1.0.0",
"license": "MIT",
"main": "./src/app.js",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build":
"productName": "Some Product",
"win": {
"description": "Some Desc",
"author": "Me",
"target": "nsis",
"arch": [
"x64"
]
}
},
"test": "ng serve --proxy-config proxy.conf.json && electron . ",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"postinstall": " electron-builder install-app-deps",
"dev-build": "ng build -prod --aot=false && electron . ",
"prod-build": "ng build -prod --aot=false && electron-builder -w"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.0.0",
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"#swimlane/ngx-charts": "^6.0.2",
"#types/jspdf": "^1.1.31",
"#types/underscore": "^1.8.3",
"bluebird": "^3.5.0",
"body-parser": "^1.18.2",
"bootstrap": "^3.3.7",
"bootstrap-notify": "^3.1.3",
"chartist": "^0.11.0",
"core-js": "^2.4.1",
"d3": "^4.10.2",
"express": "^4.16.2",
"jasmine-core": "~2.6.2",
"jquery": "^3.2.1",
"moment": "^2.21.0",
"ng2-datepicker": "^1.8.3",
"ng2-modal": "0.0.25",
"ngx-modialog": "^3.0.4",
"node-datetime": "^2.0.3",
"rxjs": "^5.1.0",
"sqlite3": "^4.0.0",
"underscore": "^1.8.3",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.2.1",
"#angular/compiler-cli": "^4.0.0",
"#angular/language-service": "^4.0.0",
"#types/electron": "^1.6.10",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/jquery": "^3.2.12",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"electron": "^1.8.4",
"electron-builder": "^19.45.4",
"electron-packager": "^9.1.0",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
},
added this to the bottom of my package.json instead of where it was before
"build": {
"win": {
"target": "nsis"
}
}
}
app.js (entry point)
const electron = require('electron');
const express = require('express');
const e_app = express();
const bodyParser = require('body-parser');
const path = require('path')
const app = electron.app
const BrowserWindow = electron.BrowserWindow;
const url = require('url');
const fs = require('fs');
const os= require('os');
const ipc = electron.ipcMain;
const shell = electron.shell;
const router = require('./electron/routes/req-router');
const dateTime = require('node-datetime');
let win
let temp_win
//set to true for production release
function createWindow () {
win = new BrowserWindow({width:1200,height:750,webPreferences: {webSecurity: false}})
var serve_path = path.join('file://',__dirname,'/../build/index.html');
win.loadURL(serve_path);
win.on('closed', function () {
win = null
})
}
Project Folder Structure
--build
--db
--dist
--e2e
--node_modules
--src
--app
--assets
--electron
--environemtns
-app.js
-index.html
...
--typings
Installing electron-packager and referencing the packaged output when calling electron-build seems to do the trick.
$ npm install --save-dev electron-packager#9.1.0 ( which happens to be the release version that doesn't error out on me"
added the following script
"pack": "electron-packager ."
modified the prod-build script
"prod-build": "ng build -prod --aot=false && electron-builder -w --prepackaged ./Some-App-win32-x64",

Resources