{"id":1315,"date":"2021-10-27T12:33:50","date_gmt":"2021-10-27T10:33:50","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1315"},"modified":"2021-11-03T14:37:18","modified_gmt":"2021-11-03T13:37:18","slug":"how-to-integrate-electron-ipcrenderer-into-angular-app-based-on-typescript","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2021\/10\/27\/how-to-integrate-electron-ipcrenderer-into-angular-app-based-on-typescript\/","title":{"rendered":"How to integrate Electron ipcRenderer into Angular app based on TypeScript?"},"content":{"rendered":"\n

Let\u00b4s say we want to use ipcMain<\/a> \/ ipcRenderer<\/a> on our project to communicate from Angular to Electron and back.<\/p>\n\n\n\n

The Electron side look like this: <\/p>\n\n\n\n

const { ipcMain } = require('electron');\n\nipcMain.on('asynchronous-message', function(event, arg) {\n  console.debug('ipc.async', arg);\n  event.sender.send('asynchronous-reply', 'async-pong');\n});\n\nipcMain.on('synchronous-message', function(event, arg) {\n  console.debug('ipc.sync', arg);\n  event.returnValue = 'sync-pong';\n});<\/code><\/pre>\n\n\n\n
how to integrate the “ipcRenderer” Electron module into our Renderer ( Here Angular app) ?<\/span><\/h4>\n\n\n\n
Solutions:<\/em><\/h4>\n\n\n\n
Robust way<\/span><\/strong>. Register object require<\/code> returned:<\/p>\n\n\n\n
if for example , we are using SystemJS<\/a> as module loader<\/p>\n\n\n\n
<script>\n    System.set('electron', System.newModule(require('electron')));\n<\/script><\/code><\/pre>\n\n\n\n
This is the best, because renderer\/init.js<\/code> script loads that module on start. SystemJS have to take it only, not loads.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Alternative way<\/span><\/strong>. Use dirty trick with declaration.<\/p>\n\n\n\n
Get electron instance inside index.html<\/code>:<\/p>\n\n\n\n
<script>\n      const { ipcRenderer } = require(\"electron\");\n<\/script>\n<\/code><\/pre>\n\n\n\n
Declare it inside your typescript<\/code> file this way:<\/p>\n\n\n\n
declare var ipcRenderer: any;\n<\/code><\/pre>\n\n\n\n
Use it with freedom : )<\/p>\n\n\n\n
ipcRenderer.send(...)<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Let\u00b4s say we want to use ipcMain \/ ipcRenderer on our project to communicate from Angular to Electron and back. The Electron side look like this: how to integrate the “ipcRenderer” Electron module into our Renderer ( Here Angular app) ? Solutions: Robust way. Register object require returned: if for example , we are using SystemJS as module loader This is the best, […]<\/p>\n","protected":false},"author":1,"featured_media":1338,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,364,5,83],"tags":[362,363],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1315"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1315"}],"version-history":[{"count":4,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1315\/revisions"}],"predecessor-version":[{"id":1339,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1315\/revisions\/1339"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1338"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}