Skip to content

Ultra-fast bootstrapping with Angular and Electron (Typescript + SASS + Hot Reload) 🚤

License

Notifications You must be signed in to change notification settings

AthleticNet/angular-electron

 
 

Repository files navigation

Angular Logo Electron Logo

Maintained Travis Build Status Make a pull request License

Watch on GitHub Star on GitHub Tweet

Introduction

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

Currently runs with:

  • Angular v10.0.9
  • Electron v9.2.0
  • Electron Builder v22.8.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 10.x CLI needs Node 10.13 or later to work correctly.

Getting Started

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

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 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.

Included Commands

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.

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 (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 ?

Browser mode

Maybe you want to execute the application in the browser with hot reload ? Just run npm run ng:serve:web. Note that you can't use Electron or NodeJS native libraries in this case. Please check providers/electron.service.ts to watch how conditional import of electron/Native libraries is done.

E2E Testing

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"

Branch & Packages version

  • 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 : (master)

About

Ultra-fast bootstrapping with Angular and Electron (Typescript + SASS + Hot Reload) 🚤

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 83.7%
  • JavaScript 8.1%
  • CSS 5.1%
  • HTML 3.1%