Introduction

Bootstrap and package your project with Angular 17 and Electron 30 (Typescript + SASS + Hot Reload) for creating Desktop applications.

Currently runs with:

Angular v17.3.6
Electron v30.0.1

With this sample, you can:

Run your app in a local development environment with Electron & Hot reload
Run your app in a production environment
Execute your tests with Jest and Playwright (E2E)
Package your app into an executable file for Linux, Windows & Mac

/!\ Hot reload only pertains to the renderer process. The main electron process is not able to be hot reloaded, only restarted.

/!\ Angular CLI & Electron Builder needs Node 18.10 or later to work correctly.

Getting Started

Clone this repository locally:

git clone https://github.com/maximegris/angular-electron.git

Install dependencies with npm (used by Electron renderer process):

npm install

There is an issue with yarn and node_modules when the application is built by the packager. Please use npm as dependencies manager.

If you want to generate Angular components with Angular-cli , you MUST install @angular/cli in npm global context. Please follow Angular-cli documentation if you had installed a previous version of angular-cli.

npm install -g @angular/cli

Install NodeJS dependencies with npm (used by Electron main process):

cd app/
npm install

Why two package.json ? This project follow Electron Builder two package.json structure in order to optimize final bundle and be still able to use Angular ng add feature.

To build for development

in a terminal window -> npm start

Voila! You can use your Angular + Electron app in a local development environment with hot reload!

The application code is managed by app/main.ts. In this sample, the app runs with a simple Angular App (http://localhost:4200), and an Electron window.
The Angular component contains an example of Electron and NodeJS native lib import.
You can disable "Developer Tools" by commenting win.webContents.openDevTools(); in app/main.ts.

Project structure

Folder	Description
app	Electron main process folder (NodeJS)
src	Electron renderer process folder (Web / Angular)

How to import 3rd party libraries

This sample project runs in both modes (web and electron). To make this work, you have to import your dependencies the right way. \

There are two kind of 3rd party libraries :

NodeJS's one - Uses NodeJS core module (crypto, fs, util...)
- I suggest you add this kind of 3rd party library in dependencies of both app/package.json and package.json (root folder) in order to make it work in both Electron's Main process (app folder) and Electron's Renderer process (src folder).

Please check providers/electron.service.ts to watch how conditional import of libraries has to be done when using NodeJS / 3rd party libraries in renderer context (i.e. Angular).

Web's one (like bootstrap, material, tailwind...)
- It have to be added in dependencies of package.json (root folder)

Add a dependency with ng-add

You may encounter some difficulties with ng-add because this project doesn't use the defaults @angular-builders.
For example you can find here how to install Angular-Material with ng-add.

Browser mode

Maybe you only want to execute the application in the browser with hot reload? Just run npm run ng:serve:web.

Included Commands

Command	Description
`npm run ng:serve`	Execute the app in the web browser (DEV mode)
`npm run web:build`	Build the app that can be used directly in the web browser. Your built files are in the /dist folder.
`npm run electron:local`	Builds your application and start electron locally
`npm run electron:build`	Builds your application and creates an app consumable based on your operating system

Your application is optimised. Only /dist folder and NodeJS dependencies are included in the final bundle.

You want to use a specific lib (like rxjs) in electron main thread ?

YES! You can do it! Just by importing your library in npm dependencies section of app/package.json with npm install --save XXXXX.
It will be loaded by electron during build phase and added to your final bundle.
Then use your library by importing it in app/main.ts file. Quite simple, isn't it?