How to import Electron in angular 2 using angular cli

angular, angular-cli, electron, node.js, webpack

Solution

Run the command `npm install electron @types/electron` Then import it normally using

`import { ipcRenderer } from 'electron'`.

If you run into any problems, try to run `npm eject`, a webpack.config.js will be generated, add "target": "electron-renderer" at the top of module.exports

Problem

I'm trying to prototype an Electron app using Angular 2 (configured with the latest webpack-based angular cli) for the gui, but I'm stuck since I don't get how to import Electron api in my angular2 components. Specifically I want to be able to open a new BrowserWindow at the click on a button in the ui... so: ``` <button type="button" (click)="openNewWindow()"> open </button> ``` and in my component: ``` openNewWindow() { let appWindow = new BrowserWindow({width: 800, height: 600}); appWindow.loadUrl('http://www.google.com'); } ``` but... how can I import BrowserWindow?! By using: ``` import { BrowserWindow } from 'electron'; ``` I get a "no module error" and by following the answer to this question: Webpack cannot find module 'electron' I get: ``` syntax error near unexpected token ( var electron = require('./') ``` What should I do? ps. by running "`electron .`" without the `BrowserWindow` import the app is working properly

Original source

Related problems