Bootstrap and package your project with Angular 12 and Electron 13 (Typescript + SASS + Hot Reload) for creating Desktop applications.
Currently runs with:
With this sample, you can:
/!\ Hot reload only pertains to the renderer process. The main electron process is not able to be hot reloaded, only restarted.
/!\ Angular 12.x CLI needs Node 11 or later to work correctly.
Clone this repository locally:
git clone https://github.com/maximegris/angular-electron.git
Install dependencies with npm (used by Electron renderer process):
There is an issue with
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
npm install -g @angular/cli
Install NodeJS dependencies with npm (used by Electron main process):
cp 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.
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
|app||Electron main process folder (NodeJS)|
|src||Electron renderer process folder (Web / Angular)|
3rd party libraries used in electron's main process (like an ORM) have to be added in
This sample project runs in both modes (web and electron). To make this work, you have to import your dependencies the right way. \
3rd party libraries used in electron's renderer process (like angular) have to be added in
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).
You may encounter some difficulties with
ng-add because this project doesn't use the defaults
For example you can find here how to install Angular-Material with
Maybe you only want to execute the application in the browser with hot reload? Just run
npm run ng:serve:web.
||Execute the app in the browser|
||Build the app. Your built files are in the /dist folder.|
||Build the app with Angular aot. Your built files are in the /dist folder.|
||Builds your application and start electron|
||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.
YES! You can do it! Just by importing your library in npm dependencies section of
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?
E2E Test scripts can be found in
||Execute end to end tests|
Note: To make it work behind a proxy, you can add this proxy exception in your terminal
Then set some breakpoints in your application's source code.
Finally from VsCode press Ctrl+Shift+D and select Application Debug and press F5.
Please note that Hot reload is only available in Renderer process.