Why is my Angular 8 app not properly packaging my app using Electron Packager?

I have been trying to export my Angular 8 app to a desktop app using Electron. I figured out how to run it with Electron, but when I decide to use the electron packager I run into an error. The error I get has to do with the ‘app-root-path’ not being found. I am using a main.ts and turning it into the main.js Electron uses. Any help would be appreciated.

Main.ts

import { app, BrowserWindow } from 'electron';
import { resolve } from 'app-root-path';

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win: BrowserWindow;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // Load the angular app.
  // Make sure that this path targets the index.html of the
  // angular application (the distribution).
  win.loadFile(resolve('dist/Invoices/index.html'));

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });
}

// 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.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  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 (win === null) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

package.json

{
  "name": "invoices",
  "productName": "Invoices electron app",
  "version": "0.0.0",
  "main": "bin/main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "tsc && ng build && electron bin/main.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@progress/kendo-angular-common": "^1.0.0",
    "@progress/kendo-angular-dateinputs": "^4.0.1",
    "@progress/kendo-angular-dropdowns": "^4.0.0",
    "@progress/kendo-angular-intl": "^2.0.0",
    "@progress/kendo-angular-l10n": "^2.0.0",
    "@progress/kendo-angular-popup": "^3.0.0",
    "@progress/kendo-theme-default": "latest",
    "html2canvas": "^1.0.0-rc.3",
    "jspdf": "^1.5.3",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.802.0",
    "@angular/cli": "~8.2.0",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "app-root-path": "^2.2.1",
    "codelyzer": "^5.0.0",
    "electron": "^6.0.4",
    "electron-packager": "^14.0.5",
    "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"
  }
}

Whenever I compile the app and Electron-packager creates the exe I click it but I get the same error. “Javascript error: Error: Cannot find module ‘app-root-path’ require stack: /Invoices/Invoices electron app-darwin-x64/Invoices electron app.app/Contents/Resources/app/bin/main.js” The only other issue I had had was having to set the tsconfig.json target to “es5” and then I ran into this issue when trying to use Electron-packager.

Answer

What got this working for me was to first set the start electron command to this

 "start:electron": "ng build --base-href ./ && electron ."

then in my angular.json set OutputPath to

 "outputPath": "dist"

Then to fix my final error of “Failed to load module script:” I changed in my tsconfig.json

"target": "es2015" to "target": "es5"

this fixed my application and allowed electron to work properly

Advertisement

Answer