/start-electron-angular-app

Angular 15 with Electron 25 (Typescript + SASS + Hot Reload)

Primary LanguageTypeScriptMIT LicenseMIT

Angular Logo Electron Logo

Introduction

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

Currently runs with:

  • Angular v15.0.0
  • Electron v25.2.0

With this sample, you can:

  • Run your app in a local development environment with Electron & Hot reload
  • Run your app in a production environment
  • 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.

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)

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