Bootstrap and package your project with Angular 10 and Electron 9 (Typescript + SASS + Hot Reload) for creating Desktop applications.
Currently runs with:
- Angular v11.0.0
- Electron v10.1.5
- Electron Builder v22.9.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
- 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 11.x CLI needs Node 10.13 or later to work correctly.
Clone this repository locally :
git clone https://github.com/maximegris/angular-electron.git
Install dependencies with npm :
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
- 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 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 main.ts
.
As see in previous chapter, this sample project runs on both mode (web and electron). To make this happens, you have to import your dependencies the right way. Please check providers/electron.service.ts
to watch how conditional import of libraries has to be done when using electron / NodeJS / 3rd party librairies in renderer context (ie. Angular).
Maybe you only want to execute the application in the browser with hot reload ? Just run npm run ng:serve:web
.
Command | Description |
---|---|
npm run ng:serve |
Execute the app in the browser |
npm run build |
Build the app. Your built files are in the /dist folder. |
npm run build:prod |
Build the app with Angular aot. Your built files are in the /dist folder. |
npm run electron:local |
Builds your application and start electron |
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 node dependencies are included in the executable.
YES! You can do it! Just by importing your library in npm dependencies section (not devDependencies) with npm install --save
. It will be loaded by electron during build phase and added to your final package. Then use your library by importing it in main.ts
file. Quite simple, isn't it ?
E2E Test scripts can be found in e2e
folder.
Command | Description |
---|---|
npm run e2e |
Execute end to end tests |
Note: To make it work behind a proxy, you can add this proxy exception in your terminal
export {no_proxy,NO_PROXY}="127.0.0.1,localhost"
- Angular 4 & Electron 1 : Branch angular4
- Angular 5 & Electron 1 : Branch angular5
- Angular 6 & Electron 3 : Branch angular6
- Angular 7 & Electron 3 : Branch angular7
- Angular 8 & Electron 7 : Branch angular8
- Angular 9 & Electron 7 : Branch angular9
- Angular 10 & Electron 9 : Branch angular10
- Angular 11 & Electron 10 : (master)