Angular / Electron using the renderer.js with angular components

0
votes

I have created an angular 6 project using the angular-cli.

Following that that I have installed Electron and done this:

  1. changed src/index.html base to

  2. Installed Electron locally:

    npm install electron --save-dev

  3. Created a main.js file on the root of my project

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

    let win;

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

    win.loadURL(file://${__dirname}/dist/myproject/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() } })

  4. Adjusted the package.json file

    { "name": "angular-electron", "version": "0.0.0", "license": "MIT", "main": "main.js", // <-- update here "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "electron": "electron .", // <-- run electron "electron-build": "ng build --prod && electron ." // <-- build app, then run electron }, // ...omitted }

If I now run

npm run electron-build

The project will work.

My problem now is that I have created a renderer.js file and want to execute functions there from my angular component

For example:

renderer.js

function somefunction() {
    // do something
}

app.component.html

<button (click)="somefunction()">Run Function in renderer.js</button>

How can I do this?

1
angulartypescriptelectronangular-cliangular6

1 Answers

1
votes

There is no need for renderer.js since you are using angular.You should add your function inside app.component.ts.

Having said that if you still need renderer.js, did you add the file to your index.html

  require('./somePath/dist/renderer.js')

This will make it globally accessible .