Angular-cli + electron import typescript

0
votes

Good afternoon, I am unable to import the electron module in my ts. I have the following error: Cannot find module 'electron'. My structure:

  • Project
    • covarage
    • dist
    • electron
      • main.js
      • package.json
    • src
      • app
        • components...
      • assest
      • environmentes
      • services
        • services
      • index.html
      • main.ts
      • polyfills.ts
      • tsconfig.json
      • typings.d.ts
    • angular-cli.json
    • karma.conf.js
    • package.json
    • protractor.conf.js
    • tslint.json

main.js electron:

const electron = require('electron')

const app = electron.app

const BrowserWindow = electron.BrowserWindow

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadURL(`file://${__dirname}/index.html`)

  mainWindow.webContents.openDevTools()

  mainWindow.setMenu(null);

  mainWindow.on('closed', function () {
    mainWindow = null;
  })
}

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

app.on('activate', function () {

  if (mainWindow === null) {
    createWindow()
  }
});

const ipc = require('electron').ipcMain

ipc.on('get-app-path', function (event) {
  event.sender.send('got-app-path', app.getAppPath())
})

My index.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>X</title>
  <script>
    window.$ = window.jQuery = require('jquery');
    var electron = require('electron');
    document.write('<base href="' + document.location + '" />');
  </script>


  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body style="padding-top: 70px;">
  <app-root>
    loading...
  </app-root>
</body>
</html>

My import in component:

import { ipcRenderer } from 'electron';

I have tested: typings.d.ts:

declare var System: any;
declare var electron: any;

declared in script index.html:

var electron = require('electron');

and component:

electron.ipcRenderer.on('got-app-path', function (event, path) {
    ...
});

nothing happens...

Any suggestion? grateful!

1
javascriptangulartypescriptelectron

1 Answers

0
votes

My problem was solved by declaring:

<script>
var electron = require('electron');
</script>

in index.html and typings.d.ts:

declare var electron: any;

My Component:

const {ipcRenderer} = electron;
console.log(ipcRenderer.sendSync('synchronous-message', 'ping'));

Part of the problem was the async!