CODEWITHSUNDEEP
angularelectron
C0mpl3x
C0mpl3x

Reputation: 532

Electron gives white screen after successful build

I'm trying to add electron to my angular project but it just gives me white screen. I looked up tutorial how to add it to angular but none of them worked.

Here is my main.js which is located: my-app/main.js

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('src/index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

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

Here is my package.js which is located: my-app/package.json

{
  "name": "nexo-tester",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "electron .",
    "build": "ng build --prod",
    "i18n:extract": "ngx-translate-extract -i ./src/app -o ./src/assets/i18n/{cze,eng,slk}.json -f namespaced-json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.2.10",
    "@angular/cdk": "^11.2.9",
    "@angular/common": "~11.2.0",
    "@angular/compiler": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/material": "^11.2.9",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@ngx-translate/core": "~13.0.0",
    "@rxweb/reactive-form-validators": "~2.1.2",
    "@stomp/rx-stomp": "~1.0.1",
    "angularx-qrcode": "~11.0.0",
    "core-js": "~3.8.3",
    "hammerjs": "~2.0.8",
    "nw": "^0.52.2",
    "rxjs": "~6.6.3",
    "sockjs-client": "~1.5.0",
    "tslib": "~2.1.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.0",
    "@angular/cli": "~11.2.0",
    "@angular/compiler-cli": "~11.2.0",
    "@angular/language-service": "~11.2.0",
    "@biesbjerg/ngx-translate-extract": "~7.0.3",
    "@types/lodash": "~4.14.168",
    "@types/node": "~14.14.27",
    "electron": "^12.0.5",
    "eslint": "~7.19.0",
    "lodash": "~4.17.20",
    "ts-node": "~9.1.1",
    "tslint": "~5.18.0",
    "typescript": "~4.1.5"
  },
  "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.8.",
  "repository": {
    "type": "git",
    "url": "git+ssh://[email protected]/filipo.hrmo/nexo-tester.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://gitlab.com/filipo.hrmo/nexo-tester/issues"
  },
  "homepage": "https://gitlab.com/filipo.hrmo/nexo-tester#readme"
}

and my index is located: my-app/src/index.html

Did I miss something or what am I doing wrong?

Upvotes: 2

Views: 6694

Answers (2)

C0mpl3x
C0mpl3x

Reputation: 532

I found the solution. I changed the main.js to:

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

let win;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

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

  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();
  }
});

And this the first part of my package.json, I didn't do any other changes to it:

{
  "name": "nexo-tester",
  "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": "ng build --baseHref=./ && electron .",
    "i18n:extract": "ngx-translate-extract -i ./src/app -o ./src/assets/i18n/{cze,eng,slk}.json -f namespaced-json"
  },

Upvotes: 2

Chaitanya
Chaitanya

Reputation: 939

  1. In your main.js instead of const path = require('path') use file://${__dirname}/your-file-name directly

     function createWindow () {
   const win = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
       preload: `file://${__dirname}/dist/preload.js`
     }
   })

   win.loadFile(`file://${__dirname}/dist/index.html`)
 }

In above code I am assuming your production build is going to store in dist folder.

  1. In package.json modify the following

     {...
   "main": "main.js",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "electron": "ng build --prod && electron ."
   }
 ...
 }

Once you update above run npm run electron

Upvotes: 3

Related Questions