How to import Electron in angular 2 using angular cli

Question

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

Answer 1

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

Answer 2

Set this in index.html

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

Add this line in typings.d.ts file

declare var electron: any;

Use inside the component like this example:

const {ipcRenderer, clipboard} = electron;
clipboard.writeText('Electron is ready!!');

Answer 3

I tried to work with angular-cli and Electron and was not able to make them to work together. It's the reason why I started the following project: https://github.com/osechet/angular-tour-of-heroes-webpack It integrates Angular 2 with webpack and Electron. It's based on the Angular 2 tutorial (with unit tests). When running Electron in dev mode (npm run start.desktop), it livereloads the sources.

Answer 4

To complete the answer given by chaouechi souhail.

As I understand his answer aims to solve the situation where the angular app is directly embedded in the electron app. If for some reason you are using two separate projects whereof one is the electron app which embeds the other as a web app using one of electron's webview components you might find the following approach helpful aswell.

1. In your electron app you'll have something like

<webview id="webview" src="http://localhost:4200/" nodeintegration></webview>

2. In your angular project you

   1. install the electron nodejs module, ie npm install electron . The types module mentioned by chaouechi might suffice, I do not know.
   2. you eject the webpack config through ng eject
   3. in webpack's config (webpack.config.js) you define electron as an external module such that webpack does not attempt to build it into the ng app, extend the exports as below

   module.exports = { //... externals: { electron: "require('electron')", // tell's webpack how to import the electron module within your angular app after being packed //... }, //... }

   4. Now, in your ng components, it should be possible to include electron classes as follows: import { remote } from "electron";

Answer 5

Update as of 3/20/2021

Angular CLI v11

This information was pretty hard to find so I'm answering in as many places as I can that has outdated info.

There are a few simple steps.

1. Add @angular-builders/custom-webpack (this saves you from ejecting angular's current webpack file which we don't really want to touch).

npm i -D @angular-builders/custom-webpack

2. Modify your angular.json to use the package you installed and a custom webpack file that you create (more detailed instructions on the package's readme)

3. Make your custom webpack file look like this:

    module.exports = {
      target: "electron-renderer",
    };

literally that's it. You don't need anything else in your webpack file and you should be all set to use electron as you expect. No need to create your own typings file or anything.